Мобильная только сетка с Фондом для электронной почты (Zurb)

Question

Я пытаюсь скрыть столбец или строку при просмотре на рабочем столе и показывать только на мобильных устройствах или наоборот.

Кто-нибудь знает, возможно ли это? Я пытался реализовать следующие классы, но это не похоже на работу с тегами.

.mobile-only {display:none;}
.desktop-only {display:block;}

@media only screen and (max-width: 596px) {

.mobile-only {display:block;}
.desktop-only {display:none;}

}

Было бы замечательно, если бы был встроенный класс, такой как small-0 или large-0, который имел эту цель.

Answer 1

Есть встроенные классы для наглядности.

от Фонда электронной почты документов. http://foundation.zurb.com/emails/docs/visibility.html

Чтобы показывать контент только на мобильных клиентах, добавьте класс .hide-for-large к элементу.
Чтобы показать контент только на настольных клиентах, добавьте класс .show-for-large к элементу.

нота - .hide-for-large не поддерживается почтовыми клиентами Gmail и Yahoo.

Answer 2

Чтобы переопределить встроенный стиль, вы должны использовать !important,

@media only screen and (max-width: 596px) {
  .mobile-only {display: block !important;}
  .desktop-only {display: none !important;}
}

Если это решение не поддерживается на всех клиентах, на которые вы ориентируетесь, попробуйте:

.example {
  width: 0px; 
  height: 0px; 
  color: transparent; 
  line-height: 0; 
  overflow: hidden; 
  font-size: 0px; 
  display: none !important; 
  visibility: hidden; 
  opacity: 0; 
  mso-hide: all;
}