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

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

Чтобы добавить на страницу текст или изображение только для пользователей мобильных устройств, вставьте следующий код контейнер внутри тэга  <body> в том месте, где этот контент должен отображаться (контейнер — это конструкция в коде HTML, состоящая из открывающего и закрывающего тегов, например, <body> и </body>, <div> и </div>):

<div class="show-on-mobile">
Здесь текст или изображение, которое будет видно только на мобильных устройствах.
</div>

Для тэга <div class="show-on-mobile"> прописываем в файле CSS свойства этого класса .show-on-mobile

 

1
2
3
4
5
.show-on-mobile { display: none; }
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .show-on-mobile { display: inline; }}

 

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

Чтобы спрятать определенный контент от пользователей мобильной версии страницы, вам нужно добавить в нужном месте контейнера <body> код, похожий на предыдущий:


<div class="hide-on-mobile">
Здесь текст или изображение, которое не будет видно только на мобильных устройствах.
</div>

Затем необходимо прописать стили CSS в одноименном файле:

Чтобы спрятать определенный контент от пользователей мобильной версии страницы, вам нужно добавить в нужном месте контейнера <body> код, похожий на предыдущий:


<div class="hide-on-mobile">
Здесь текст или изображение, которое не будет видно только на мобильных устройствах.
</div>

Затем необходимо прописать стили CSS в одноименном файле:

 

1
2
3
4
5
.hide-on-mobile { display: inline; }
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .hide-on-mobile { display: none; }}

 


 

 

Комментарии   

0 #1 Сергей 02.03.2019 15:27
Благодарю, помогло. Мучался сколько. А оказалось все намного проще. :-)
Цитировать

Добавить комментарий