CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3carousel
Lynob
Lynob

Reputation: 5327

Bootstrap carousel: remove bottom margin

here's the site. If you resize the window to a smaller size. You'll notice there's a bottom margin/padding caused by

.carousel-inner {
    background-color: #03324c;
}

I could remove that but the indicators won't be visible and there will be an empty gap at the bottom . I know that that the images have different size, I tried resizing, same issue. I have tried many things for 2 days, nothing worked.

.carousel-inner {
    background-color: #03324c;
}
.carousel-inner img {
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    opacity: 0.7;
    width: 100vw;
    height: auto;
    max-height: 100vh;
    bottom: 0;
}
.carousel-caption h3 {
    color: #fff !important;
}

Upvotes: 1

Views: 1855

Answers (2)

Datapalace
Datapalace

Reputation: 139

@feihcism, I immediately agree with your comment, then I had to make the image 100% whatever its parent is and believe me. it works

.carousel-item img {
    position: absolute;
    object-fit:cover;
    top: 0;
    left: 0;
    min-height: 100%; // I mean this!
}

Upvotes: 0

feihcsim
feihcsim

Reputation: 1552

You'd be better off using a background-image combined with background-size:cover on the .item elements.

For example, your first item would change to this (just remove the img tag):

<div class="item" style="min-height: 710px;">
  <div class="carousel-caption">
    <h3>New York</h3>
    <p>The atmosphere in New York is lorem ipsum.</p>
  </div>
</div>

And the styling for the corresponding .item element would be this:

.item {
  background-image: url(images/medium/quote.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center; 
}

Upvotes: 1

Related Questions