Различное поведение макета на рабочем столе и планшете или смартфоне

У меня проблема с веб-сайтом, который я создаю:

Дизайн отлично работает на любом устройстве, особенно на планшетах и ​​смартфонах. Он также отлично работает в Chrome Developer Tools - симуляторе устройств.

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

Однако, когда я уменьшаю размер экрана настольного компьютера до аналогичного размера планшета или смартфона, дизайн выглядит сломанным. Текст не соответствует z-индексу и виден поверх активного меню.

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

В чем может быть проблема? У кого-нибудь есть такая же проблема?


person Rafael Munoz    schedule 10.08.2018    source источник


Ответы (2)


используйте класс начальной загрузки для нескольких макетов. Если вы используете класс мобильного использования class="col-sm-12" и т. д.

person Vipul Nankar    schedule 10.08.2018
comment
И какое это имеет отношение к z-index? Как это связано с проблемой, показанной на изображениях? - person Rafael Munoz; 10.08.2018

Если вы перезагрузите страницу после того, как изменили ее размер на экране рабочего стола, дизайн по-прежнему не работает?

person MarinaG    schedule 10.08.2018
comment
Если я перезагружаю страницу, меню закрывается, и я должен открыть его, нажав на гамбургер. Окончание в той же позиции. Развернутое меню не учитывает z-индекс, и в нем невозможно нажать на пункты меню. - person Rafael Munoz; 10.08.2018
comment
Судя по первой картинке, z-индекс не задействован. Похоже, что меню смещает содержимое вниз и не покрывает его более высоким z-индексом перед ним. - person MarinaG; 10.08.2018
comment
Проблема, вероятно, в высоте открытого меню. - person MarinaG; 10.08.2018
comment
Но чего я не понимаю, так это почему существует разное поведение. Либо толкая содержимое вниз, либо закрывая его. Это точно такой же код! - person Rafael Munoz; 10.08.2018