Убрать картинки в мобильной версии

Слов в тексте – 151, время чтения в минутах – 1



Здесь, слева, есть иллюстрация, которая не будет видна в заметке при чтении на смартфоне.

К слову, в большинстве постов нет картинок, которые вы видите на главной странице блога.

Мне нравятся разноцветные и чёрно-белые картинки в постах на сайте, но, учитывая, что 70 процентов читателей используют для просмотра большинства сайтов мобильные телефоны, картинки в заметках не добавляют радости.

У многих замедляется загрузка и расходуется интернет-трафик…

Короче, вот несколько стилей CSS, которые автоматом будут показывать изображения в записях только в компьютерах и планшетах, например.


@media screen and (max-width: 768px) {
  .post-content img {
    display: none;
  }
}


@media screen and (max-width: 768px) {
  img {
    display: none;
  }
}


@media screen and (max-width: 768px) {
  .entry-content img {
    display: none;
  }
}


@media screen and (max-width: 768px) {
  .post-thumbnail img {
    display: none;
  }
}


@media screen and (max-width: 768px) {
  .ваш-класс-изображения img {
    display: none;
  }
}

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


 ⬇ Поделиться в соцсетях и мессенджерах



Популярные записи

Рубрики блога




newsbee Media