Search code examples
htmlemailmedia-queries

Media queries in e-mails?


made my very first responsive one column email today. Happens to work on all clients, I was very proud of myself. Until my boss wanted me to make it so that it displayed a different version on desktops and then a different version for mobiles. This can probably best be described as responsive, though the header would be a full width 1000px header and then when it gets to a certain px (probs 600px) it would display: none and then a media query kicks in to display a certain class that replaces that header.

Hope i am being clear here, i have a tendency to overcomplicate things....

here is a link to my site for where the source for the html email is living : http://www.muhammadkasimali.co.uk/ZurbFoundation/

BTW i did not use the zurb framework (despite the directory name), it was a giant waste of time pursuing that route imo.


Solution

  • You can include media queries in emails but you need to be aware of what device email client will support it. This link here should help in explaining email responsivity and gives you a good amount of detail.