Слушайте, ну вы уже достали, капитаны Очевидности. Вместо того, чтобы ответить на вопрос, каждый считаем своим долгом пофилософствовать и посоветовать читать документацию. Вы уверены, что я не читаю документацию?
Хм... Да, кажется это должно решать задачу. На самом деле, код у меня сложнее и, возможно, какие-то события привязаны непосредственно к блоку, надо посмотреть... Но приём очень перспективный.
P.S. На CSS потихоньку перекладывают все больше и больше возможностей JS.
danilr, ну и ещё момент. Флексбоксы всё-таки не предназначены для двухосевого позиционирования (они могут очень гибко выстраивать разметку только по одной оси). Для двухосевого по хорошему нужны гриды. Но у них есть проблемы с совместимостью (IE). Зато ими всё это делается на раз-два: https://codepen.io/nanto-work/pen/YgzMEx
danilr, там просто к каждому 5 элементу (начиная с первого) добавляем псевдоэлемент на всю высоту и ширину колонки (100% по ширине и 500% по высоте) с нужным бэкграундом.
ничего не понятно. у вас в коде вообще нет кнопок (точнее у них display: none)
и формы вы зря расплодили - это всё добро надо было в одну форму запихнуть.
Плюсую. Как же задолбало при отладке откапывать нужные правила через веб-инспектор, а потом поиском по исходникам (которые ещё всякие вебпаки тяп-ляп склеивают) всё это править (а ещё частенько бывают дублирующие записи). В "обычном css" веб-инспектор сразу тебе даст ссылку на нужный стилевой файл и на строку кода в нём.
EYPPNM, да там в коде ничего не разберёшь - вебпак склеивает, а исходники во Vue.
Нашёл костыль в виде "initial-scale=0.5".
Но вообще прям магия какая-то происходила. Страница загружается в мобильной версии нормально, перехожу в десктопную и обратно - расползается. Поставил width=600, чекаю веб-инспектором - у body ширина 600, у всех вложенных элементов 600 и меньше, а контент все равно не влезает во вьюпорт...