А как бы вы сверстали этот блок?

Question

[Damir Aushenov]

Доброго времени суток
Верстка должна быть адаптивной
вот собственно код codepen.io/yespeace/pen/LpWNmM
Мне не нравится что приходится выносить list с категориями в position absolute
Даже с такой версткой у меня будет много возни с media quierry под другие разрешения.
Ну в принципе еще был вариант, вынести баннеры под position absolute, ведь все равно они не нужно на мобилках, верно?

Answer 1

[Андрей Федоров]

О чем ты? Тут совершенно незачем position. У тебя два блока - заголовок и основная часть. Каждый из них разбит на 3 части:
- заголовок: категории, группа пунктов 1, группа пунктов 2
- основная часть: группа пунктов 3, группа банеров 1 и группа банеров 2.

Все что тебе надо сделать - задать одинаковую ширину в процентах или vh:
1. категории и группа пунктов3, например width: 20%;
2. группа пунктов 1 и группа банеров 1, например width: 60%;
3. группа пунктов 2 и группа банеров 2, например width: 20%;

Сомневаюсь, что при использовании display: flex тут вообще потребуются медиа-запросы.

Comments

[Damir Aushenov]

если мы делим на 3 колонки, то я не могу задать общий бэкграунд для группы пунктов.( у меня горит на дизайнера нашего.

[Андрей Федоров]

почему не можешь? background-position тебе в помощь.

[Damir Aushenov]

можно вам в скайп написать?

[Андрей Федоров]

Думаю не стоит. Давай дальше сам. )

[Damir Aushenov]

мы же блоку устанавливаем ширину, соответственно фон покрывается на эту ширину, я не знаю что вы имели ввиду под background-position. я на гуглил способы как покрыть всю ширину, отрицательные марджины, падинги, но они все являюется не семантическими
Все равно спасибо

[Андрей Федоров]

я имел в виду вот это codepen.io/aliencash/pen/PPpywL

[Damir Aushenov]

ясно, но я не про это

Answer 2

[Lumore]

getbootstrap.com , а именно вам нужен грид.