foundation-emails: Media queries fail after inlining

How can we reproduce this bug? I have two different font-size values in my app.scss file. I used the media query exactly as shown in the docs:

/* Main header */
.header {
    h1, .tagline {
        font-family: Palatino, "Times New Roman", serif;
        margin-bottom: 0;
        color: $black;
    }
    h1 {
        font-weight: bold;
        font-size: 48px;
        line-height: 48px;
        text-transform: uppercase;

        @media only screen and (max-width: #{$global-breakpoint}) {
            font-size: 20px;
            line-height: 20px;
        }
    }

    .tagline {
        font-size: 14px;
        line-height: 14px;
        }
    }
}

When I run npm start, I see the header resize for a smaller viewport:

Wide version: screenshot 2016-04-28 10 30 15

iPhone 5: screenshot 2016-04-28 10 30 37

However, when I run npm run build (or npm run zip or npm run litmus), the header does not resize: screenshot 2016-04-28 10 32 33

When I inspect the h1 in Chrome, I see that the media query styles have not been applied to the tag by the inliner: Post inlined h1 tag: screenshot 2016-04-28 10 33 45

Web Inspector in Chrome: screenshot 2016-04-28 10 33 55

This appears to be true in every mobile client in Litmus as well.

Is it possible that the inliner is not working correctly? I don’t totally understand how it’s supposed to work. Help!

About this issue

Original URL
State: open
Created 8 years ago
Comments: 16 (4 by maintainers)

Most upvoted comments

If you are missing the media queries in <head> after running inliner, make sure the placeholder  is still there - it will be replaced with the media query styles.

timohausmann on Dec 29, 2017

I so wish what @timohausmann told would be in the documentation. Would’ve saved me some time figuring out what is happening with my media queries.

zsoltmar on Dec 22, 2017

In order to use media queries in emails you need to include the !important flag as part of the property declaration. However, it’s only necessary for styles that are inlined.

Inlined styles take precedence over style/media query tags and you need to override inlined styles for your code to work. It’s a basic order of operations for email developers.

A lot of web designers rail against the overuse of the !important declaration but, for email designers, it’s our best friend. - Jason Rodriguez @Litmus

@rafibomb please include this in your Zurb Email Template Docs when using media queries. Also, this issue can be closed. Thanks!

billyromano on Sep 9, 2020

If you have doubts, you can always check css specifity articles. Like this one: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Inline styles added to an element (e.g., style=“font-weight:bold”) always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.

nikitasol on Jul 20, 2017

Also experiencing the same issue in Chrome. Found that using the !important issue solved it too. However this should totally not be necessary. On the topic of using important! with media queries. I’m now facing a conundrum of an issue whereby I’d like to display two different styles different screen sizes. Now given:

.product-card-row
  @media (min-width: 480px)
    display: none !important

  @media (min-width: 768px)
    display: table !important

The above will never work correctly because if the screen size is bigger than 480!px display will always be table since it last media instance.

As mentioned you shouldn’t have to use !important, these rules should be respected regardless. What is the correct way of handling multiple media queries without having to use important.

@rafibomb - Do you know if there is any movement on this issue?

davidpatters0n on Jul 20, 2017