Highlighted

Bootstrap carousel doesn't respond properly

Explorer ,
Nov 14, 2019

Copy link to clipboard

Copied

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?

 

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
}

TOPICS
Bootstrap

Views

317

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Bootstrap carousel doesn't respond properly

Explorer ,
Nov 14, 2019

Copy link to clipboard

Copied

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?

 

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
}

TOPICS
Bootstrap

Views

318

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 14, 2019 0
Adobe Community Professional ,
Nov 15, 2019

Copy link to clipboard

Copied

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

Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 15, 2019 1
Explorer ,
Nov 15, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 15, 2019 0
LEGEND ,
Nov 15, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 15, 2019 0
LEGEND ,
Nov 15, 2019

Copy link to clipboard

Copied

 

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
}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 15, 2019 2
larrycfc LATEST
Explorer ,
Nov 15, 2019

Copy link to clipboard

Copied

Thanks, that did it!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 15, 2019 0