Katerina23

Как убрать меню для телефонов

Рекомендованные сообщения

Установила программу для chrome, позволяет просматривать в браузере как бы выглядел сайт на телефоне и у меня не получается прописать стили, чтобы спрятать боковое меню?

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
....

в стилях style.css

@media screen and (max-width: 600px) {
  .menu-niz-1{
     display: none;
  }
}

меню которое надо убрать

<div class='menu-niz-1'>
<!--здесь меню-->
</div>

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

все работает http://jsfiddle.net/hrqgwjay/
возможно у вас есть еще какие-то стили или скрипты которые это меню показывают

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

А встроенный эмулятор устройств из отладчика Chrome (F12 и кликнуть по второй слева иконке, «планшет и телефон», в меню) что показывает?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Цитата

все работает http://jsfiddle.net/hrqgwjay/
возможно у вас есть еще какие-то стили или скрипты которые это меню показывают

Не знаю, что вы пытались показать, на том сайте. Но у меня в правом нижнем углу отображается пустой холст, не зависимо использую я браузер Chrome по умолчанию или же браузер для Android.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Полагаю, Switch74 показывал пример, что ваш код скрывает меню при ширине окна 600px и менее, и показывает его при ширине свыше 600px, как и ожидается (в «песочнице» по ссылке это можно увидеть, перетягивая разделитель между секторами). И если этого не показывает «программа для Chrome» — возможно, дело в этой «программе»... Поэтому я и спросил, что показывает встроенный инструмент для этой же задачи.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Я сейчас проверила, через Speed Page от гугл, там есть два режима "Для мобильных" и "Для компьютеров", так вот мои стили сработали для мобильных устройств.Оказывается я не знала, что параметр max-width: 600px означает, что меню будет исчезать только когда размер экрана будет меньше 600px. На тестовом сайте достаточно увеличить окно браузера, чтобы увидеть результат. До этого я окно не увеличивала поэтому результата не было. 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Собираюсь pagespeed увеличить до 100 % на компьютере. Для этого в начале нужно удалить в html лишние пробелы. Нашла сайт где написано про программу gulpjs. Подскажите можно ли сначала эту программу на тестовом сайте протестировать, установленный на denwer?

Изменено пользователем Katerina23

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Похожие публикации

    • Автор: artaka
      Работаю верстальщиком за небольшую плату (100-300руб в зависимости от работы) Связь со мной : 
      VK vk.com/artakagrand
      Telegram @artakagrand
      email fefsert@gmail.com
      Примеры работ:
      http://teslamodelx.epizy.com
      http://teslamodelx.epizy.com/infoblog/index.html
      http://teslamodelx.epizy.com/blog/index.php
    • Автор: ZAMPOREZKE
      Оцените верстку и скажите, что не так.Заранее спасибо.
      https://zamporezke.github.io/
  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.