Media Query in Responsive Email Template

CSS - Media Queries for email template not working

You need to reverse your styling, so:

.mobileHide {
    display: none;
}

@media only screen and (max-width: 639px){
    .mobileHide { 
        display:block !important; 
    }
}

(max-width: 639px) says that the maximum width the page can be for this style to be applied is, in this case, 639px, so you want this to be display: block. Now for less than 639px we can define the more general rule, which is display:none and will be applied for >639px

Media queries in html email templates

Media queries in general have pretty good support across email clients. There are a few limitations (like Gmail not understand height based media queries), but this is usually not a problem. There are however a few edge cases worth knowing about:

Gmail on mobile (iOS and Android) does not support <style> tags (and thus media queries) when using a Non Gmail Account (like an Outlook.com email address for example).
Yahoo on Android requires an empty <head></head> tag before your real head tag as it removes the first <head> (and all its content) it finds.

For these cases, the best practice is usually to opt for a different coding approach, not relying on media queries like the fluid/hybrid technique or a mobile first approach.

Responsive email without media query or calc() function [both Office 365 and the new Outlook.com]

You will need the @media, but, you can include the <style> block in the <body>.

For the sake of completeness/others, you might do something like this:

<style type="text/css">
@media screen and (max-width:600px) {
  .hideMobile { display:none!important; }
}
</style>
<img class="hideMobile" src="..." width="xxx" />

Media Query in Responsive Email Template

CSS - Media Queries for email template not working

Media queries in html email templates

Responsive email without media query or calc() function [both Office 365 and the new Outlook.com]

Related Topics

Leave a reply