Всплывающее боковое меню отображается неправильно на низкой высоте экрана. ⇐ Jquery

[Гость]

У меня есть всплывающее боковое меню

На полной странице все выглядит хорошо

введите здесь описание изображения

Но когда высота экрана слишком мала (это касается горизонтальных экранов мобильных устройств), то всё будет отображаться некорректно

введите здесь описание изображения

Как это исправить?

Для ширины экрана в CSS я всегда использую, скажем, @media screen and (max-width: 767px), но я не видел, чтобы это использовалось для высоты

Я думаю, что нужно сделать так, чтобы когда высота экрана слишком маленькая и ссылки уходили под футер, то просто скрыть сам футер и уменьшить размер текста, но как лучше это сделать?< /п> let MenuGeneral = $('#menu-general'); $('#menu-up-control').click(function () { $('.wrapper-main').css('непрозрачность', '0,7'); if ($(document).width() > 767) { MenuGeneral.animate({right: '0'}, 500); } еще { MenuGeneral.animate({right: '0'}, 500); } }); $('#menu-up-control-close').click(function () { $('.wrapper-main').css('непрозрачность', '1'); if ($(document).width() > 767) { MenuGeneral.animate({right: '-400px'}, 500); } еще { MenuGeneral.animate({right: '-100vw'}, 500); } }); .menu-up-control { плавать: вправо; размер шрифта: 26 пикселей; верх: 3 пикселя; положение: родственник; курсор: указатель; отступ: 10 пикселей 100 пикселей 0 0; } .menu-up-control-close { ширина: 15 пикселей; } .menu-up-control-close я { белый цвет; размер шрифта: 40 пикселей; верх: 3 пикселя; положение: родственник; курсор: указатель; отступ: 10 пикселей 0 пикселей; поле:50 пикселей 0 0 40 пикселей; } .menu-general { положение: фиксированное; ширина: 400 пикселей; верх: 0; справа: -400 пикселей; внизу: 0; z-индекс: 9999; цвет фона: черный; @media screen и (максимальная ширина: 767 пикселей){ ширина: 100vw; справа: -100vw; } } .menu-general .menu-footer { дисплей: гибкий; выровнять-элементы: по центру; разрыв: 40 пикселей; flex-wrap: обертка; позиция: абсолютная; внизу: 0; слева: 0; правильно: 0; отступ: 40 пикселей 0 40 пикселей 60 пикселей; фон: фиолетовый; } .menu-main li, .menu-main li a { размер шрифта: 36 пикселей; вес шрифта: 700; } .menu-main li { поле: 0 0 15 пикселей; } .menu-main li а { шрифт-вес: жирный; белый цвет; текстовое оформление: нет; Документ [*] Ссылка 1 [*]Ссылка 2 [*]Ссылка 3 [*]Ссылка 4 [/list] Нижний колонтитул