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

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

Мне нравятся разноцветные и чёрно-белые картинки в постах на сайте, но, учитывая, что 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 пикселей будут игнорировать картинки внутри записей. При условии, что вы найдёте необходимый для вас класс изображений внутри постов.

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