CODEWITHSUNDEEP
htmlcsspositioning
MikesBarto2002
MikesBarto2002

Reputation: 175

Button not absolutely positioned in section

These buttons are supposed to be absolutely positioned within the .gallery, but for some reason, when I expand the viewport, they stretch outside of the gallery and are positioned to the viewport. Am I missing something here?

HTML:

<section class="gallery">
  <div>
    <a href="http://www.cnn.com">
      <img src="/img/gallery-img-1.jpg" alt="Cover of lookbook">
     </a>
  </div>
  <ul>
    <li><a href="http://www.cnn.com"><img src="/img/gallery-img-1.jpg" alt="Cover of lookbook"></a></li>
    <li><a href="http://www.cnn.com"><img src="/img/gallery-img-2.jpg" alt="Some beautiful necklaces"></a></li>
    <li><a href="http://www.cnn.com"><img src="/img/gallery-img-3.jpg" alt="More beautiful necklaces"></a></li>
  </ul>
  <button class="arrow leftArrow">&lt;</button>
  <button class="arrow rightArrow">&gt;</button>
</section>

CSS:

.gallery {
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

.gallery div, .gallery li:not(:first-child) {
  display: none;
}

.arrow {
  position: absolute;
  z-index: 9999;
  background-color: transparent;
  border: none;
  font-size: 2em;
  color: white;
  cursor: pointer;
  text-decoration: none;
}

.leftArrow {
  top: 40%;
  left: 5%;
}

.rightArrow {
  top: 40%;
  right: 5%;
}

Upvotes: 0

Views: 51

Answers (2)

MikesBarto2002
MikesBarto2002

Reputation: 175

Okay, I fixed it. All I had to do was add display: inline-block; to the .gallery and that kept the boundries of the gallery from stretching beyond the width of the images. Thanks for your help, everyone!

Upvotes: 1

Dan
Dan

Reputation: 9468

Change the width on your image from max-width to width:100%

img {
  width: 100%;
}

The issue was occurring when the viewport became larger than the image size. Since you had set max-width: 100% the image was being constrained. The arrow was positioned properly, but the image stopped expanding to fill the viewport.

Upvotes: 0

Related Questions