Сделайте карусель с абсолютным позиционированием отзывчивой
У меня есть карусель на веб-странице с абсолютным позиционированием сверху: 420 пикселей и слева: 640 пикселей. Я бы хотел, чтобы он сворачивался и становился вертикальным при изменении размера экрана. Я помещаю медиа-запрос в display: flex flex-direction: column. Ползунок не перемещается из своего абсолютного положения. Есть ли способ сделать его отзывчивым и свернуть в столбец, когда размер экрана меньше.
.main {
background: transparent;
border-radius: 10px;
max-width: 50%;
width: auto;
text-align: center;
position: absolute;
top: 420px;
left: 640px;
}
@media screen and (max-width: 600px) {
.main {
max-width: 100%;
width: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
.main div img {
max-width: 100%;
width: auto;
}
Вопросы, требующие помощи по отладке («почему этот код не работает?») Должны включать в себя желаемое поведение, конкретную проблему или ошибку и кратчайший код, необходимый для их воспроизведения в самом вопросе. См .: Как создать минимальный воспроизводимый пример.
Ответы 1
display:flex и flex-direction: column влияют только на внутреннее устройство вашего div. Чтобы изменить положение вашего div, вам нужно будет изменить значения top и left. Например:
.main {
background: transparent;
border-radius: 10px;
max-width: 50%;
width: auto;
text-align: center;
position: absolute;
top: 420px;
left: 640px;
display: flex;
}
@media screen and (max-width: 600px) {
.main {
max-width: 100%;
width: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
top: 100px;
left: 100px;
}
}
.main div img {
max-width: 100%;
width: auto;
}<div class = "main">
<div>First div</div>
<div>Second div</div>
</div>
Можете ли вы опубликовать свой html и все соответствующие CSS во фрагменте