Фонд: запрос на небольшие медиа не отображается на смартфоне

Question

Я сейчас работаю над страницей this. Может кто-нибудь объяснить мне, почему сайт не будет отображаться правильно на смартфоне? Среднее значение запроса отображается вместо небольшого.

Я интегрирован фундаментной JS-файлы, например, так:

<script src="files/bower_components/foundation/js/foundation.min.js"></script> 
<script src="files/bower_components/jquery-ui/jquery-ui.min.js"></script> 

и файлы CSS (фундаментные, настройки) импортируются в мой файл style.scss.

Я сделал то же самое на another page, но там все работает хорошо.

Спасибо за каждый ответ!

Answer 1

Я ознакомился с содержанием Html на первой странице, и вы используете класс hide-for-large-up для мобильного меню. Это означает, что меню будет отображаться для всех ширины окна, которые не определены как большие в медиа-запросах.

Я бы предложил использовать hide-for-medium-up, так как обычно вам нужно, чтобы мобильное меню отображалось на небольших экранах. a тег будет выглядеть следующим образом:

<a class="mobile-navigation hide-for-medium-up" href="#offcanvas"> 

Кроме того, он не выглядит, как вы определили навигационное меню специально для среднего содержания. Когда я сжимаю окно до «средней» ширины, я вижу мобильное меню «гамбургер». Если вы хотите конкретно показывать контент для экрана среднего размера, используйте класс show-for-medium-only