Счетчик изображений перемещается, когда я пишу больше текста в абзаце, но это нормально, когда текст короткий ⇐ Html

[Anonymous]

короткий текст
длинный текст

Код: Выделить всё

/* Photo grid */
.image-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
padding: 40px;
background-color: black;
}

.image-item {
text-align: center;
color: white;
}

.image-item img {
max-width: 100%;
/* Prevents the image from exceeding its container's width */
height: auto;
aspect-ratio: 3 / 2;
/* Maintain aspect ratio */
object-fit: cover;
border-radius: 10px;
max-height: 400px;
/* Adjust this value to control the height of the images */
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
margin-bottom: 15px;
}

.image-item h3 {
font-size: 1.2em;
margin: 10px 0;
}

.image-item p {
font-size: 0.9em;
color: #ccc;
}

/* Carousel Styles */
.carousel {
position: relative;
/* Make this container the reference for absolutely positioned elements */
width: 100%;
margin: 0 auto;
}

.carousel-container {
position: relative;
/* Ensure the container is the reference for absolute positioning */
overflow: hidden;
/* Prevent overflow of slides or elements */
}

.carousel-slides {
display: flex;
transition: transform 0.5s ease;
}

.carousel-slide {
position: relative;
/* Ensure the slide is the reference for absolute positioning */
display: flex;
justify-content: center;
align-items: center;
flex-basis: 100%;
/* Ensures each slide takes up the full width of the carousel */
}

.carousel-slide p {
flex-basis: auto;
/* Let the text adapt to its content size */
}

.image-wrapper {
position: relative;
display: inline-block;
overflow: hidden;
}

.image-wrapper img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
border-radius: 10px;
max-height: 400px;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
z-index: 0;
}

/* Horizontal images (3:2 aspect ratio) */
.carousel-slide img.horizontal {
aspect-ratio: 3 / 2;
/* Force 3:2 aspect ratio */
object-fit: cover;
/* Crop to fit */
width: 100%;
/* Ensure the image fills the container width */
height: auto;
/* Maintain aspect ratio */
border-radius: 10px;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
}

/* Vertical images (2:3 aspect ratio) */
.carousel-slide img.vertical {
aspect-ratio: 2 / 3;
/* Force 2:3 aspect ratio */
object-fit: contain;
/* Maintain aspect ratio without cropping */
width: 100%;
/* Ensure the image fills the container width */
height: auto;
/* Maintain aspect ratio */
border-radius: 10px;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
}

.carousel-slide img {
max-width: 100%;
height: auto;
object-fit: contain;
/*to maintain aspect ratio */
border-radius: 10px;
max-height: 400px;
margin-bottom: 15px;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
flex-basis: auto;
/* Allow images to take up only as much space as needed */
}

/* Counter */
.carousel-counter {
position: absolute;
top: 10px;
/* Move the counter to the top */
left: 10px;
/* Move the counter to the left */
background: rgba(0, 0, 0, 0.5);
color: white;
padding: 5px 10px;
border-radius: 5px;
font-size: 14px;
z-index: 10;
pointer-events: none;
/* Prevent interaction */
}

/* Navigation Buttons */
.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
z-index: 10;
font-size: 24px;
}

.carousel-btn.prev {
left:  10px;
}

Код: Выделить всё

1 / 4


[img]https://i.ibb.co/MP25TzB/Chris-and-Anna-1-copy.webp[/img]
Chris and Anna
Forever starts here 💍

[img]https://i.ibb.co/JR0SjM1/Chris-and-Anna-2-copy.webp[/img]
Chris and Anna
Two hearts, one promise ❤️

[img]https://i.ibb.co/CtG7B4z/Chris-and-Anna-3-copy.webp[/img]
Chris and Anna
Brothers, united for the big day 🤵‍♂️

[img]https://i.ibb.co/vqcxBG0/Chris-and-Anna-4-copy.webp[/img]
Chris and Anna
Her squad, his crew, together for the love of two 👰‍♀️🤵‍♂️



❮
❯

здесь можно увидеть проблему
codepen
--если вы используете мобильное устройство, возможно, оно отображается неправильно. Я еще не оптимизировал для мобильных устройств.--
Я попробовал обернуть изображение и счетчик карусели в новом относительно позиционированном элементе, попробовал переместить .carousel-counter в CSS. возможно, я неправильно обернул, но не могу найти ошибку.

Подробнее здесь: https://stackoverflow.com/questions/793 ... s-fine-whe