Html Question posted in
Some basic documentation can be found here.

Html – Carousel with adaptive text position over image with fixed width

There is carousel with text over image 1200px wide.
Overlapping of elements is achieved using grid areas, instead of position relative/absolute. The carousel is working with scroll-snap module.
UPDATE:
The goal is moving the text to the left when width is decreased:
enter image description here
Now the text is cut off instead of moving responsively:
enter image description here
Breakpoint(max-width: 981px) in source is just for full example. The issue occurs before that breakpoint(width=1120px on pictures above)

.carousel {
  display: grid;
  gap: 10px;
  max-width: 1200px;
  margin: 0 auto;
  grid-auto-flow: column;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  grid-template-areas: 'item-1 item-2 item-3';
}

.carousel .item {
  display: grid;
  scroll-snap-align: center;
}

.carousel .item-1 {
  grid-area: item-1;
  grid-template-areas: 'first';
}

.carousel .item-2 {
  grid-area: item-2;
  grid-template-areas: 'second';
}

.carousel .item-3 {
  grid-area: item-3;
  grid-template-areas: 'third';
}

.carousel .item-1 .image {
  grid-area: first;
}

.carousel .item-2 .image {
  grid-area: second;
}

.carousel .item-3 .image {
  grid-area: third;
}

.carousel .item-1 .text {
  grid-area: first;
  align-self: center;
  justify-self: end;
}

.carousel .item-2 .text {
  grid-area: second;
  align-self: center;
  justify-self: end;
}

.carousel .item-3 .text {
  grid-area: third;
  align-self: center;
  justify-self: end;
}
<section class="carousel">

  <div class="item item-1">
    <picture class="image">
      <source srcset="https://placehold.co/800x732" media="(max-width: 981px)" width="800" height="732" />
      <img src="https://placehold.co/1200x732" alt="" width="1200" height="732" />
    </picture>
    <div class="text">
      Lorem ipsum dolor sit amet
    </div>
  </div>

  <div class="item item-2">
    <picture class="image">
      <source srcset="https://placehold.co/800x732" media="(max-width: 981px)" width="800" height="732" />
      <img src="https://placehold.co/1200x732" alt="" width="1200" height="732" />
    </picture>
    <div class="text">
      Lorem ipsum dolor sit amet
    </div>
  </div>

  <div class="item item-3">
    <picture class="image">
      <source srcset="https://placehold.co/800x732" media="(max-width: 981px)" width="800" height="732" />
      <img src="https://placehold.co/1200x732" alt="" width="1200" height="732" />
    </picture>
    <div class="text">
      Lorem ipsum dolor sit amet
    </div>
  </div>

</section>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The issue is solved by using several breakpoints with margin-right for .text element


  2. 0

    The picture element maintains a width of 1200px even when an image with dimensions 800×732 is loaded. This happens because the width of img is set to 1200px, and the source element only updates the src attribute without adjusting the size.

    To fix the issue, you’ll need to replace the HTML code with the following:

        <picture class="image">
      <source srcset="https://placehold.co/800x732" media="(max-width: 981px)" width="800" height="732" />
      <img src="https://placehold.co/1200x732" alt="" width="1200" height="732" />
    </picture>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search