CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
Lucas Santos
Lucas Santos

Reputation: 1369

Twitter Bootstrap carousel responsive not working right

Ok I have a pretty straight forward question and I don't think a lot of examples will be needed. Basically I have a Bootstrap Carousel with an image of 1500px x 550px and it's set to take 100% of the screens width.. When I minimize the screen the height of the image stays the same while the width decreases making the image distorted like its being squeezed together. Here is my simple carousel:

<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

and here is sthe CSS styling I have for it

.carousel {
      margin-bottom: 60px;
      margin-top:-16px;
    }

    .carousel .container {
      position: relative;
      z-index: 9;
    }

    .carousel-control {
      height: 80px;
      margin-top: 0;
      font-size: 120px;
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
      background-color: transparent;
      border: 0;
      z-index: 10;
    }

    .carousel .item {
      height: 550px;
    }
    .carousel img {
      position: absolute;
      top: 0;
      left: 0;
      min-width: 100%;
      height: 550px;
    }

Now I have tried to use Media Queries but it only fixes the height problem for a certain amount of screen width and as you keep minimizing the screen it ends up getting messed up again. Here is my Media Query:

@media (max-width: 979px) {

      .container.navbar-wrapper {
        margin-bottom: 0;
        width: auto;
      }
      .navbar-inner {

        margin: 0px 0px -20px 0;
      }

      .carousel .item {
        height: 300px;
      }
      .carousel img {
        width: auto;
        height: 300px;
      }

}

 @media (max-width: 767px) {

      .carousel {
        margin-left: -20px;
        margin-right: -20px;
      }
      .carousel .container {


      }
      .carousel .item {
        height: 350px;

      }
      .carousel img {
        height: 350px;

      }


    }

And just to let you know if it's any extra help im using all the bootstrap assets like responsive.css, bootstrap.min.css and boostrap.css

Upvotes: 2

Views: 4086

Answers (4)

Morilon
Morilon

Reputation: 456

Lad, try these lines. They fixed the problem for me.

.carousel .item {
     margin: 0 auto;
      min-height: 300px;
    }

.carousel-img {
    margin: 0 auto;
    min-height: 300px;
}

I don't know about you but, for me, the problem was the fact that my items and the images inside it, didn't have any min-height.

Upvotes: 0

ashfaq ahmed
ashfaq ahmed

Reputation: 76

Don't add fix height, make the height auto like this

.carousel .item { height: auto;

}

.carousel img {
      position: absolute;
      top: 0;
      left: 0;
      min-width: 100%;
      height: auto;
}

Upvotes: 0

Christophe Ferreboeuf
Christophe Ferreboeuf

Reputation: 1058

I was trying to find a work around for the same thing when I arrived on your problem and somehow, it helped me a lot.

What I did, is to use media queries as you did and defining a height for carousel-inner following a maximum or a minimum width. By the way, I use bs3 and the carousel have a .img-responsive() function like that :

> .item {
 display: none;
 position: relative;
 .transition(.6s ease-in-out left);
 // Account for jankitude on images
 > img,
 > a > img {
  .img-responsive();
  line-height: 1;
 }
}

This part seems to deal with the problem of resizing the image.

Upvotes: 1

SkiWether
SkiWether

Reputation: 38

You might want to check to see if there is a 'min-height' being set somewhere (maybe in one of the bootstrap css files). Min-height always overrides a max-height setting.

Upvotes: 1

Related Questions