GoFuckYourself.com - Adult Webmaster Forum - Tech CODERS HELP!!! Bootstrap 4 Carousel Responsive

- Fucking Around & Business Discussion (https://gfy.com/forumdisplay.php?f=26)

- - Tech CODERS HELP!!! Bootstrap 4 Carousel Responsive (https://gfy.com/showthread.php?t=1286592)

CODERS HELP!!! Bootstrap 4 Carousel Responsive

It's been hours of googling, looking for a responsive fix for the Bootstrap 4 carousel images, and I am having no luck. Any coders in here that can get this carousel to be responsive when the browser window is resized?

Here is the page... http://phil-flash.com/test.php

You have to add smaller pics in a separate responsive CSS3 file.

Its late now but I can help you with this tomorrow.

Someone said to put this in for CSS:

Code:

.carousel-item.active,

.carousel-item-next,

.carousel-item-prev {

  display: block;

}

Basically go from flex to block.
Hope this helps. I'd test it but it's 3am.. :upsidedow

Quote:

Originally Posted by phil-flash (Post 22100436)

I coded up the proper solution.

Contact me.

Thanks

Hi, I'm not a coder, but you can try this:
You need to add a new media request to the custom.css in the RESPONSIVE CSS section.
This is need for changing the height of the carousel when the size of the browser window change.
Already you have two media requests in the custom.css - @media (min-width: 40em) and @media (min-width: 62em)

Now these blocks look like this:

Code:

/* RESPONSIVE CSS

-------------------------------------------------- */



@media (min-width: 40em) {

  /* Bump up size of carousel content */

  .carousel-caption p {

    margin-bottom: 1.25rem;

    font-size: 1.25rem;

    line-height: 1.4;

  }



  .featurette-heading {

    font-size: 50px;

  }

}



@media (min-width: 62em) {

  .featurette-heading {

    margin-top: 7rem;

  }

}

And after making changes, they will look like this:

Code:

@media (min-width: 40em) {

  /* Bump up size of carousel content */

.carousel-item > img {  

height: 15rem;

}

.carousel-item {

height: 15rem;

}



  .carousel-caption p {

    margin-bottom: 1.25rem;

    font-size: 1.25rem;

    line-height: 1.4;

  }



  .featurette-heading {

    font-size: 50px;

  }

}



@media (min-width: 62em) {

.carousel-item > img {  

height: 22rem;

}

.carousel-item {

height: 22rem;

}



  .featurette-heading {

    margin-top: 7rem;

  }

}

I wrote a height size for an example (15rem and 22rem). Pick up the height yourself, so that the picture is not distorted.
I hope this helps you.