How do I write a media query for Gmail?
Question
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?
1 answers
solution1
6 ACCPTED 2018-04-09 01:23:09
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>
Update:
Tested again on 9th July 2019 and code still works
Works on version 2019.5.26.252424914.release (should work between v8.3.12 and current version noted)
Cheers
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.