Inspiring

Answered

Bootstrap carousel doesn't respond properly

5 replies
1117 views
Translate

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?

Bootstrap

This topic is closed to new replies. Start a new post to keep the conversation going.

O

osgood_Correct answer

Legend

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
}

O

osgood_Correct answer

Legend

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
}

Translate

L

larrycfcAuthor

Inspiring

Thanks, that did it!

Translate

BenPleysier

Community Expert

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

Translate

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

L

larrycfcAuthor

Inspiring

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

Translate

O

osgood_

Legend

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.

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.