Skip to main content
Inspiring
November 15, 2019
Answered

Bootstrap carousel doesn't respond properly

  • November 15, 2019
  • 2 replies
  • 1095 views

https://www.durhambluesandbrewsfestival.com/

The carousel on the home page has default gray bars on the sides, but on smaller screen sizes, this area moves above the photos, pushing them down and wasting screen space. 

 

There are other carousels under the photo menu that respond fine. What's the difference on the front page?

This topic has been closed for replies.
Correct answer osgood_

 

In your custom stylesheet (override.css) you have the below css selector. It's not needed and is obviously setting up some kind of conflict in the Chrome browser, so remove it.

 

.carousel-inner img {
width: 100%;
height: 100% !important
}

2 replies

osgood_Correct answer
Legend
November 15, 2019

 

In your custom stylesheet (override.css) you have the below css selector. It's not needed and is obviously setting up some kind of conflict in the Chrome browser, so remove it.

 

.carousel-inner img {
width: 100%;
height: 100% !important
}

larrycfcAuthor
Inspiring
November 16, 2019

Thanks, that did it!

BenPleysier
Community Expert
Community Expert
November 15, 2019

The home page has the carousel without a conatiner as in

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 

The other carousels have a container wrapped around it as in

<section class="container">
  <header>
    <h1 class="text-center">2015 Festival Photos</h1>
  </header>
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
larrycfcAuthor
Inspiring
November 15, 2019

Thanks, Ben. I added the container but the problem persists.

Legend
November 15, 2019

This only happens in the Chrome browser, its fine in Firefox at smaller screen sizes. However there must be something incorrect with your code as both should exhibit the same. I'll have a look later unless one of the Bootstrappers chimes in before hand. Bootstrap is not something I care to become embroiled in if I dont have to.

 

None of the carousels respond in Chrome as you would like, even under the 'Photos' tab. If you actually widen the screen in Chrome you get the same effect, a grey area above and below the image.