Menu
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?
200
Here is a working example. Its tested on Gmail App (v8.3.12).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
@media only screen and (max-width:768px) {
.desktop-view{display: none !important;}
}
@media only screen and (min-width:769px) {
.mobile-view{display: none !important;}
}
</style>
</head>
<body>
<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;">
<tr>
<td> mobile content here </td>
</tr>
</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;">
<tr>
<td> desktop content here </td>
</tr>
</table>
</body>
</html>Works on version 2019.5.26.252424914.release as well (should work between v8.3.12 and current version noted)
The most important part is the the colon. If you have spaces before and after the colon in your media query declaration, then Gmail will strip out the style tag.
199
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
