CSS media mobile

@media only screen and (max-width: 1024px) {
  /* For mobile: */
  .nomobile {display: none;}
}

@media only screen and (min-width: 1024px) {
  /* For desktop: */
  .nodesktop {display: none;}
}

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

Mobile First означает проектирование для мобильных устройств до разработки для настольных компьютеров или любого другого устройства (это ускорит отображение страницы на небольших устройствах).

Это означает, что мы должны внести некоторые изменения в наш CSS.

Вместо того, чтобы менять стили, когда ширина становится меньше 768 пикселей, мы должны изменить дизайн, когда ширина становится больше 768 пикселей. Это сделает наш дизайн Mobile First:

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .cssss {width: 8.33%;}
}

Пример стилей для шрифтов

body {
	color: #1e1e1e;
	font-family: 'Futura PT Book', sans-serif;
	font-size: 14px;
}
h1 {font-size: 48px;}
h2 {font-size: 32px;}
h3, h4, h5, h6 {font-size: 21px;}

/* desktop font */
@media only screen and (min-width: 768px) {
  /* For desktop: */
  body {font-size: 18px;}
	h1 {font-size: 60px;}
	h2 {font-size: 40px;}
	h3, h4, h5, h6 {font-size: 27px;}

}
/* end */

@seomur

Помощь и консультации по wordpress, woocommerce и ускорению сайта - https://t.me/seomur