студия занимательная МИХАЛИКА
! Михалика - запросто с WordPress:
доступная ручная работа по правилам оптимального интернет(а)
Здравствуйте !

издатель:   в теме: Создание сайта - WordPress
студия занимательная МИХАЛИКА

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

 

Продолжим тему монетизации, но не забывая о Usability…

…как помните из предыдущей статьи — добавление на сайт блоков рекламы Google AdSense и Яндекс — рекламный код у нас завёрнут в id-класс (идентификатор) adsens — он нам и пригодится, реализуя  сегодняшнюю задачу.

 

Но к рабочему id потребуется добавить ещё одно свойство, соорудив коротенький примерчик, в котором и обыграем нашу мечту свойством-значением display:none

 

Начнём концерт…


 

прячем отображение блоков рекламы на экране низкого разрешения

 

 

 

ПАМЯТКА:

…напоминаю всякий раз: заведите какой-то документ «запоминалку» всех совершаемых эксов с блогом. Копируйте редактируемые файлы. Пригодится!

Поверьте: так короче до профессионализма, ибо возможность переварки накопленных крупиц знаний в кашу маловероятна!

 

 

Работает это следующим образом:

…применяются некоторые медиа-запросы css3.

Так и в нашем случае помогут примеры с правилом @media, после которого назначено определённое условие для типов (screen) носителей: логические операторы и медиа-функции.

 

 

Получается примерно так:

…из которых логический оператор @media only screen and и медиа-функция (max-width:400px) { …

медийная фраза обязательно в скобках.

 

 

Нам требуется типаж screen — экран монитора.

 

 

Далее задаём медиа-запросу CSS свойства, которые будут выполняться:

display — понятно. none — скрывает (правильнее — удаляет) мелкий/крупный элемент сайта.

И помните, что географическое место скрытого элемента не резервируется в web-документе, а контент веб-страницы формируется без него.

 

 

Да вот и сформированные нужные строки:

 

 

@media only screen and (max-width:400px) {
#adsens{display:none}
}

 

 

Что ж, коли определились с экспериментальным блоком — давайте приступим к дельцу.

Потребуется открыть файл стилей в корне шаблона — style.css и припомнить прошлые действия вставки кодированных строк рекламы…

 

 

У нас получился такой HTML-код-монетизации в предыдущей статье:

 

 

<div id="adsens">ВАШ_КОД</div>

 

 

И если вы id класс не меняли, то копируйте верхний пример с @media указанием и прописывайте в свой в файл стилей.

 

 

Теперь главное)) ступайте на страничку блога и жмите F5 — банальным стягиванием окна браузера компьютера оцените как выполняются css указания. …либо просто взгляните на своём гаджете.

 

 

…400px (ширина экрана, после которой контент перестраивается) или 800px — решать вам, ибо бог ведает какие величины оптимальнее пристальному взору поисковиков…

 

 

 

Предфинальный занавес!

 

 

…кроме того — подобными media-запросами настраиваются физические исчезания и иных divов геометрических элементов сайта… Экспериментируйте…

…с видеороликом, например, — я задал настройки media одному из сайтов — ибо Java-скрипты конфликтовали при просмотре блога на мелком экране. Opera-mini этим страдает…

 

 

В следующей статье выучимся, чтобы на скрытое географическое место элемента видео добавлялась ссылка… или пояснение…

 

 

…Автор полагает, читателю полезно будет подписаться…

 

Содружество web-маньеристов ATs и К

 


подписка feedburner МИГ подписки - ВРЕМЯ знаний!!

 

 


На этом моя повесть нынче решительно окончена...!


Нажатия на кнопочки определяют Ваше высокое гражданское сознание
Удачи в работе и творчестве..!


меточная навигация:


Комментарии © 0 к статье: Как скрыть элементы блока рекламы или видеоролика на мелком экране мобильника

Поделитесь соображениями: Ваши мысли очень важны! $ правила комментирования ©

Ваш e-mail не будет опубликован. Обязательные поля помечены *