Mobile nur Raster mit Foundation für E-Mails (Zurb)

Question

Ich versuche, eine Spalte oder Zeile zu verbergen, wenn es auf dem Desktop angezeigt wird und nur auf dem Handy oder umgekehrt angezeigt wird.

Wer weiß, ob das möglich ist? Ich habe versucht, die folgenden Klassen zu implementieren, aber es scheint nicht auf die Tags zu funktionieren.

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

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

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

} 

Es wäre toll, wenn es ein in der Klasse wie Klein 0 oder groß 0 gebaut ist, die diesen Zweck hatte.

Answer 1

Es gibt eingebaute Klassen für Sichtbarkeit.

von Foundation für E-Mail-Dokumente. http://foundation.zurb.com/emails/docs/visibility.html

Inhalt Um nur auf mobilen Clients, fügen Sie die Klasse .hide-for-large auf das Element.
Um den Inhalt nur auf Desktop-Clients anzuzeigen, fügen Sie dem Element die Klasse .show-for-large hinzu.

Hinweis - .hide-for-large wird auf Gmail- und Yahoo-E-Mail-Clients nicht unterstützt.

Answer 2

Um das Inline-Styling zu umgehen, müssen Sie !important verwenden.

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

Wenn diese Lösung nicht in allen Clients unterstützt Sie zielen, versuchen:

.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; 
}