CODEWITHSUNDEEP
csstwitter-bootstrapimagecarouselresponsive
Oliver Stott
Oliver Stott

Reputation: 63

Image wont fit bootstrap carousel

I have almost finished creating a website but I am struggling with the carousel.

I have tried to make it responsive on multiple device widths, but over 1200 pixels the image in the carousel isn't filling the full width. It works okay when i remove the media queries so i'm assuming there's something going on here.

Am i not right in thinking that once the the media queries are ignored, the browser should use the CSS that is not inside a media query block?

Standard CSS

.carousel-indicators li{
    border-radius: 12px;
    width: 14px;
    height: 14px;
}
.carousel-inner{
    width: auto;
    height: 1000px;
}
.carousel-inner img{
    width: 100%;
    height: 100%;
}
}

@media (max-width: 575.98px) {
.carousel-inner{
    width: 100%;
    height: 450px;
}
.carousel-inner img{
    width: auto;
    height: 450px;
    padding-top: 80px;
    transform: translateX(-5rem);
}
}

@media (min-width: 576px) {
.carousel-inner{
    width: 100%;
    height: 450px;
}
.carousel-inner img{
    width: auto;
    height: 450px;
    padding-top: 80px;
    transform: translateX(-5rem);
}
}

@media (min-width: 768px) {
.carousel-inner{
    width: 100%;
    height: 450px;
}
.carousel-inner img{
    width: auto;
    height: 450px;
    padding-top: 80px;
    transform: translateX(-5rem);
}
}
@media (min-width: 992px) {
.carousel-inner{
    width: 100%;
    height: 600px;
}
.carousel-inner img{
    width: auto;
    height: 600px;
    padding-top: 80px;
}
}
@media (min-width: 1200px) {
.carousel-inner{
    width: 100%;
    height: 600px;
}
.carousel-inner img{
    width: auto;
    height: 600px;
    padding-top: 80px;
}
}


<!-- Image SLider & Indicators -->
 <div id="slides" class="carousel slide" data-ride="carousel">
    <ul class="carousel-indicators">
      <li data-target="#slides" data-slide-to="0" class="active"></li>
      <li data-target="#slides" data-slide-to="1"></li>
      <li data-target="#slides" data-slide-to="2"></li>
    </ul>
  <div class="carousel-inner" id="home">
    <div class="carousel-item active">
      <img src="img/warm.jpg">
    </div>
     <div class="carousel-item">
      <img src="img/landscape2.jpg">
    </div>
     <div class="carousel-item">
      <img src="img/river.jpeg">
    </div>
    <div class="carousel-caption">
      <h1 class="display-2">ALIAS PHOTOGRAPHY</h1>
        <h3>My Journey Through Nature...</h3>
        <div class="showcase-buttons">
        <!-- <button type="button" class="btn btn-outline-light btn-lg mr-1">VIEW DEMO</button> -->
        <a href="#gallery"><button type="button" class="btn btn-primary btn-lg">VIEW GALLERY</button></a>
        </div>
      </div>
  </div>

Upvotes: 0

Views: 35

Answers (1)

Afron Orana
Afron Orana

Reputation: 635

Its not the media queries problem, it is because you are setting images height to 600px. That limits their with to be proportional with height. If you want to use full width images, you should try using divs with background-images.

Upvotes: 1

Related Questions