Bootstrap carousel doesn't respond properly

[larrycfc]

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?

[BenPleysier]

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

[larrycfc]

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

[osgood_]

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.

[osgood_ · Accepted solution]

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
}

[larrycfc]

Thanks, that did it!