Задать вопрос
@franciskoEU
html

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

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

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


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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Настроить доступ к Netflix
20 апр. 2024, в 18:04
3000 руб./за проект
Помочь настроить GeoIp у nginx для docker nginx:alpine
20 апр. 2024, в 17:55
3000 руб./за проект
Карточная игра "сумасшедшие восьмёрки" на winforms
20 апр. 2024, в 17:49
1500 руб./за проект
Ещё заказы