I am trying to write some HTML/CSS for an email but can't get things to show and hide responsively. I have one big table, with two nested tables. Each of the nested tables is a footer that is hidden or shown based on the screen size. Here's the code
<style>
@media all and (max-width: 768px) {
table[table-view=desktop] {
display: none !important;
}
table[table-view=mobile] {
display: block;
}
}
@media all and (min-width: 769px) {
table[table-view=mobile] {
display: none !important;
}
table[table-view=desktop] {
display: block;
}
}
</style>
<some other stuff here>
<table class="module mobile-view" table-view="mobile" border="0" cellpadding="0" cellspacing="0" data-type="code" role="module" style="table-layout: fixed;">
...
</table>
<table class="module desktop-view" table-view="desktop" role="module" data-type="code" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
...
</table>
When looking at this in Gmail, both footers appear. When using the preview tool in the email building tool (SendGrid), it looks fine.
I tried selecting the mobile-view and desktop-view classes in the media query but that didnt work- so I tried putting attributes in the HTML.
What am I doing wrong?
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
