Skip to main content
L
larrycfc
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

O
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
}

    L
    larrycfcAuthor
    Inspiring
    November 16, 2019

    Thanks, that did it!

    BenPleysier
    Community Expert
    BenPleysierCommunity 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!
      L
      larrycfcAuthor
      Inspiring
      November 15, 2019

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

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

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices