xonar

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

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

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

Я сделал так.

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

У вас evt.preventDefault(); это отменяет дефолтное поведение. Как по мне правильнее было бы сделать, чтоб при нажатие на выпадающее меню ему навешивался класс active у которого в стилях было бы показывать этот блок, а по дефолту эти менюшки выпадающие скрыть. Тут больше стилями можно сделать, чем JS

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

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

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

Я бы советовал 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%;
}

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

Странные у вас параметры экранов под адаптив. Я делаю под параметры из бутстрапа, они и у остальных популярны.

https://bootstrap-4.ru/docs/4.1/layout/grid/

Логика подсказывает, что надо сразу тогда делать контейнер под 768px на мониторах >768 && <1024.

Так сделайте контейнер не фиксированным, а max-width дайте и если экран будет ужиматься, он будет подстраиваться под него.