Tech CODERS HELP!!! Bootstrap 4 Carousel Responsive

[phil-flash]

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

[RyuLion]

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

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

[Colmike9]

Someone said to put this in for CSS:

.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..

[blackmonsters]

Originally Posted by phil-flash

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

I coded up the proper solution.

Contact me.

Thanks

[Fox_Shadow]

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:

/* 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:

@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.