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

phil-flash · 12-05-2017, 12:12 AM

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 · 12-05-2017, 12:38 AM

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

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

Colmike9 · 12-05-2017, 12:39 AM

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

blackmonsters · 12-05-2017, 08:31 AM

Quote:

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 · 12-06-2017, 01:57 AM

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.

12-05-2017, 12:12 AM	#1
phil-flash Confirmed User Industry Role: Join Date: Apr 2003 Location: Florida Posts: 649	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 __________________ phil-flash Cash - Gallery Exporter

12-05-2017, 12:38 AM	#2
RyuLion ClubDomCash.com Industry Role: Join Date: Mar 2003 Location: San Diego Posts: 32,054	You have to add smaller pics in a separate responsive CSS3 file. Its late now but I can help you with this tomorrow. __________________ Promote Clubdom.com (since 1997) - Adult Biz Consultant

12-05-2017, 12:39 AM	#3
Colmike9 (>^_^)b Industry Role: Join Date: Dec 2011 Posts: 7,170	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.. __________________ Join the BEST cam affiliate program on the internet! I've referred over $1.7mil in spending this past year, you should join in. I make a lot more money in the medical field in a lab now, fuck you guys. Don't ask me to come back, but do join Chaturbate in my sig, it still makes bank without me touching shit for years..