Как скрыть выбранный блок или информер в мобильной выдаче

Как скрыть определенный блок для мобильных устройств

Вопрос: Чтобы максимально облегчить отображение страницы в мобильной выдаче в шаблоне надо установить какие то ограничения, стили, параметры? Как сделать, чтобы определённый информер/блок не показывался при таком разрешении экрана, где он будет выглядеть плохо, без необходимости подгонять их под мобильные. Просто запретить показ.

Такой способ можно описать?

Как скрыть определенный блок для мобильных?

Ответ: Реализуется решение данного вопроса не слишком сложно. Что нужно сделать:

1. Нужный блок или информер завернем как пример в див:

<div id="block-media">здесь содержимое нужного блока или информер $MYINF_5$</div>

2. Далее настраиваем стили для данного блока:

@media screen and (min-width: 320px) and (max-width: 650px) { #block-media { display: none;} }

3. Вместо минимальной ширины 320 (начиная с которой будет скрываться данный блок) и максимальной 650 (по которую будет скрываться, начиная с 651 блок уже отобразится) настраивайте нужные вам параметры.

Лицензия: CC BY-SA 4.0

Автор: Юрий Герук

Помогла ли вам статья?
Да Нет
Статья оказалась полезной для 0 человек
avatar
Я почему то не получил оповещения ответа на свой вопрос и посчитал, что автор его проигнорировал за несущественностью. Рад что я ошибся.
Способ действительно простой, но уточните пожалуйста подробней как оформить @media в тексте CSS? Кавычки и правильные пробелы и скобочки, правильное название? У меня на сайте вроде бы уже применяются подобные запросы, как их не перепутать?
avatar
Такие условия лучше всего прописывать в конец таблицы стилей после всех кавычек и стилей. Нужно быть внимательнее, условие меди имеет свои открывающую и закрывающую кавычки:
@media { } внутри которых уже прописываются стили для конкретного класса с еще двумя кавычками. Просто быть внимательней, не путаться и не удалять эти кавычки чтобы ничего не сломать.