Jump to content
  • 0

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


Question

Установила программу для 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>

 

Link to post
Share on other sites

6 answers to this question

Recommended Posts

  • 0

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

Link to post
Share on other sites
  • 0
Цитата

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

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

Link to post
Share on other sites
  • 0

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

  • Thanks 1
Link to post
Share on other sites
  • 0

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

Link to post
Share on other sites
  • 0

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

Edited by Katerina23
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Комментарии

    • Понял, спасибо большое. Я просто думал, что если выбран класс, то и применяяется только к конкретному классу, а оказывается не правильно думал. Еще раз спасибо
    • Добрый день! Есть такая страница http://tehne.com/grant/right-bank-of-kazanka-river-competition-2021-ru Хочу сделать чтобы в мессенджерах когда отправляют ссылку вместе с заголовком показывалась определенная картинка. Я добавил эту картинку в мета тэги og и link rel="image_src"  и она все равно не появляется когда делюсь в мессенджерах Почему так?  
    • Не будет и не должно, потому как первым в списке дочерних элементов у родителя "team-descr" — это H3. <div class="team-descr"> <h3>Bradley Hunter</h3> <!-- это :first-child --> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <!-- это :last-child --> </div> Под :first-child/:last-child подразумевается не вхождение выбранного Вами селектора, а первая нода, тег, которые одет по списку. В ваше случае псевдо-элементы будут работать только в том случае, если в контейнере первым и последним будут ".name" <div class="team-descr"> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <!-- :first-cild --> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <!-- :last-child --> </div>  
    • https://codepen.io/cheeroque/pen/JjEZyEL  Если вместо last:child поставить first:child то свойства работать не будут 
    • Здравствуйте. Выложите пример на https://jsfiddle.net
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.