Menu icon Foundation
Media queries not applied

When I add media queries to my css (or sass), they are not applied because the premailer inline css in the markup, making it more priority.

Ex:

.myClass {
  background-color: blue;
  @media screen and (max-width: 596px) {
    background-color: red;
  }
}

The final html is compiled in something like:

<div class="myClass" style="background-color:blue"></div>

So, no matter what is my viewport, it will always show blue background.

Unless I do something like:

.myClass {
  background-color: blue;
  @media screen and (max-width: 596px) {
    background-color: red !important;
  }
}

But I don't want to handle all media queries with !important.

I am using inky and ruby.

What's the best approach in this case?

media queriesinline cssinky

When I add media queries to my css (or sass), they are not applied because the premailer inline css in the markup, making it more priority.

Ex:

.myClass {
  background-color: blue;
  @media screen and (max-width: 596px) {
    background-color: red;
  }
}

The final html is compiled in something like:

<div class="myClass" style="background-color:blue"></div>

So, no matter what is my viewport, it will always show blue background.

Unless I do something like:

.myClass {
  background-color: blue;
  @media screen and (max-width: 596px) {
    background-color: red !important;
  }
}

But I don't want to handle all media queries with !important.

I am using inky and ruby.

What's the best approach in this case?

Rafi Benkual about 1 year ago

Media queries are stripped out by some email clients in the head, so they need to be in the body. Unfortunately it is common to need !important on some of your styles.