Форумы портала PHP.SU :: Версия для печати :: Проблема с верхим меню с верхним меню на маленьких девайсах ?

1. mstdmstd - 28 Апреля, 2021 - 09:57:20 - перейти к сообщению

Всем привет,
Делаю админку на основе tailwindcss 2.1 с верхним меню которое складывается на маленьких
девайсах и на каком-то этапе начались проблемы как раз намаленьких девайсах - я пропустил в какой момент

Надо открыть http://tads-back[dot]my-demo-apps[dot]tk[dot][dot][dot]admin/categories (логин там уже введен)
1) и скажем на Ipad-е https://prnt[dot]sc/126o2h6 выпадающие элементы не поддерживают фон верхнего меню
не могу выбрать элементы под меню - может из-за проблемы выше

2) На Nexus 7 : таблица с данными растягиывает всю страницу https://prnt[dot]sc/126oalh
Хотя там есть прокрутка страницы с данными.

Как это починить ?

Спасибо!

2. Vladimir Kheifets - 29 Апреля, 2021 - 13:40:46 - перейти к сообщению

mstdmstd пишет:

Добрый день!

Чтобы исправлять, попробуйте протестировать на разных устройствах со сменой ориентации.
Сделать это можно на РС в режиме амуляци, например, в бразере Firefox
нажав клавиши CTRL + Shift + M

Дествительно, разметка работает странно.
Текст не переносится, а обрубается (зафиксирована ширина + overflow: hidden)
Попробуйте исправить (добавить) Media Queries в файле
http://tads-back[dot]my-demo-apps[dot]tk/css/toastr[dot]css

CODE (html):
скопировать код в буфер обмена

@media all and (min-width: 241px) and (max-width: 480px) {
...  
}
@media all and (min-width: 481px) and (max-width: 768px) {
... 
}

Удачи!