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

Question

[MegaPuxapb]

Как правильно заверстать этот элемент ("блок Дешевые Аналоги")


Сделал :бефором с шириной 2000px+
Появился скрол.
Скрол убрал html, body {overflow-x: hidden;}
Теперь глючит бутстраповская модалка (у неё при вызове в оверлее, паддинг с права).

как быть?

Comments

[Сергей Герасимов]

Попробуйте задать ширину 50vw

[Виктор Таран]

Закрыть контейнер
контейнер флюид
кол 6
контейнер

[MegaPuxapb]

Сергей Герасимов, спасибо. так и сделал)

Answer 1

[dom1n1k]

А просто сделать эту панель на всю ширину вьюпорта не?
Не засовывая её в бутстраповский контейнер.
А потом разбить на 2 половины, синюю и белую.

Comments

[MegaPuxapb]

так слишком просто)

[dom1n1k]

https://habrahabr.ru/post/347166/

[MegaPuxapb]

dom1n1k,
спасибо.
хорошая статья, и отличное решение.
но, лень было переделывать, сделал через 50vw.

[dom1n1k]

50vw нормально работать не будут, потому что мешает скролл-бар

Answer 2

[TheRevan]

сделай у секции, которая на всю ширину 1 before, 1 after и поставь у нее overflow: hidden, не будет проблем

Answer 3

[Виталий]

.entry-header::before {
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    width: 150rem;
    top: 0;
    left: 100%;
    background-color: inherit;
}