xonar

Всем спасибо, решил проблему с помощью device-pixel-ratio.

e.preventDefault() то что вам нужно, если я правильно вас понял.

По классу или айди определяете кнопку Развернуть и на неё вешаете обработчик с preventDefault и получаем, что вы и хотели. При клике на развернуть (ссылке), стандартное действие ссылки отменяется.

Тут нужно отследить событие клика на одну из кнопок, потом циклом форич накидывать класс с анимацией на блок который должен открыться и накинуть класс на блок с кнопками который уезжает вверх. По поводу самой анимации тут ничего сложного судя по примеру, смещение вверх у кнопок и появление у блока с опасити. Сами по вкусу можете посолить, поперчить.

Как смог, описал вкратце.

Если вы этого сами не понимали, то вы пока явно не Frontend разработчик)

Я сделал так.

На сервере, просто продублировал функцию, которая выводит всё это в отдельный блок. И у одного родителя nth-child(event) сделал, а у другого odd. Так я смог решить проблему) В одном блоке показываются аватарки 1, 3, 5 а у другого 2, 4, 6. Небольшой костыль, но самое то)

У этого меню есть внутри блок контейнер у которого есть паддинги слева и справа по 15 пикселей.

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

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

Было такое, но мне пришлось сносить VS code. Не знаю что вы используете, но может тоже поможет.

Я бы советовал webp использовать, добавит оптимизации вам и советовал бы не подключать из вне скрипт, лучше себе их скачать.

<script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js "></script>

Создаётся блок с position: fixed; top, left и т.д. параметрами где бы вы хотели чтоб блок выглядывал. Даёте блоку display: none;

Дальше вам нужно будет написать небольшой кусочек JS, что при клике на какой-то элемент вам нужно повесить класс popup-active на этот блок и он успешно появится, а при нажатие на крестик или ещё куда-нибудь он успешно закроется.

popup-active в css дайте display: block;

Если же хотите чтоб Поп-Ап сразу появился на сайте, то делайте тоже самое что я описал выше, только немного наоборот. Сначала поп-ап даёте display: block; а при нажатие на крести или ещё куда-нибудь, навешиваете ему класс popup-off.

У popup-off разумеется задаёте display: none;

Очень легко это.

Display: flex; дайте для родителю этих блоков, если нет оберните в блок, затем дайте flex-wrap: wrap;

Если у блоков нет ширины, дайте максимальную ширину или flex: 50%; чтоб 2 блока было, а следующие перескочили на другую строку.

Скиньте код на codepen или jsfiddle, помогу сделать.

Как я вижу, у вас 4 блока file обёрнуты в блок files.

.files{
display: flex;
flex-wrap: wrap;
}

.file{
flex: 50%;
}

Как я знаю, то никак. Но, можно сделать иначе. Блок со слайдером у которого есть вертикальная прокрутка(задаём вертикальную прокрутку), так же содержимое слайдера поворачиваем. В итоге мы получим горизонтальную прокрутку