@franciskoEU

Как свертстать такие элементы?

Друзья, подскажите пожалуйста как правильно сверстать этот элемент? Это вид на мобильных при 320px, соответственно, при разришении экрана блоки которые сейчас наполовину вылазят за пределы должны постепенно появляться. Я думал их разпихать с помощью абсолютного позиционирования, но не могу понять как это сделать. Вот собственно макет для мобайла
5d1f8161382b3022826137.jpeg

А вот для декстопа. 5d1f821f32b46177491145.jpeg
В идеале, конечно, хотелось чтобы после 992px блоки сами стали в эту сетку, но наверное придеться делать отдельные блоки для телефонов и ПК и показывать их через медиа запросы.
  • Вопрос задан
  • 107 просмотров
Пригласить эксперта
Ответы на вопрос 3
HunteR-VRX
@HunteR-VRX
frontend-разработчик
Прячьте их абсолютным позиционированием
img {
    position: absolute;
    left: -150px;
}


Соответственно применяя каждую конкретную позицию опираясь на media-запрос
Ответ написан
@franciskoEU Автор вопроса
Решил следующим образом, велосипед, но уж как смог)
Для всего section дал dislpay: flex; flex-direction: column; aling-items-center;
Для блоков которые вылазят за края создал блок-обертку, которой дал dislpay: flex; flex-wrap
Для самих этих блоков задал position: relative (чтобы не выпадал из потока при разширении) и спозиционировал как на макете.
Больше всего смущает дополнительный блок обертка, ну да ладно)
Ответ написан
vetero4eg
@vetero4eg
Frontend
может просто дизайнеру руки оборвать?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы