Why is Gmail ignoring my media queries? (On iOS)

Question

I've been debugging and testing an email template in Gmail. I'm using Zurb Foundation for the base (I also used it to inline most of my CSS). It looks fine everywhere, but Gmail is completely ignoring my media queries (the soblue class is a test of whether it's the grid or the media queries).

I've researched on Gmail media query support (it should be working for iOS) and I've also validated my CSS. Here is the CSS within the style tag:

@media only screen and (max-width: 596px) {
.soblue {
 color: #0000FF !important;
}

.small-float-center {
    margin: 0 auto !important; float: none !important; text-align: center !important;
  }
  .small-text-center {
    text-align: center !important;
  }
  .small-text-left {
    text-align: left !important;
  }
  .small-text-right {
    text-align: right !important;
  }

  table.body img {
    width: auto; height: auto;
  }
  table.body center {
    min-width: 0 !important;
  }
  table.body .container {
    width: 95% !important;
  }
  table.body .columns {
    height: auto !important; box-sizing: border-box; padding-left: 16px !important; padding-right: 16px !important;
  }
  table.body .column {
    height: auto !important; box-sizing: border-box; padding-left: 16px !important; padding-right: 16px !important;
  }
  table.body .columns .column {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  table.body .columns .columns {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  table.body .column .column {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  table.body .column .columns {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  table.body .collapse .columns {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  table.body .collapse .column {
    padding-left: 0 !important; padding-right: 0 !important;
  }

  td.small-12 {
    display: inline-block !important; width: 100% !important;
  }
  th.small-12 {
    display: inline-block !important; width: 100% !important;
  }
  .columns td.small-12 {
    display: block !important; width: 100% !important;
  }
  .column td.small-12 {
    display: block !important; width: 100% !important;
  }
  .columns th.small-12 {
    display: block !important; width: 100% !important;
  }
  .column th.small-12 {
    display: block !important; width: 100% !important;
  }

  table.body table.columns td.expander {
    display: none !important;
  }
  table.body table.columns th.expander {
    display: none !important;
  }
  table.body .right-text-pad {
    padding-left: 10px !important;
  }
  table.body .text-pad-right {
    padding-left: 10px !important;
  }
  table.body .left-text-pad {
    padding-right: 10px !important;
  }
  table.body .text-pad-left {
    padding-right: 10px !important;
  }
  table.menu {
    width: 100% !important;
  }
  table.menu td {
    width: auto !important; display: inline-block !important;
  }
  table.menu th {
    width: auto !important; display: inline-block !important;
  }
  table.menu.vertical td {
    display: block !important;
  }
  table.menu.vertical th {
    display: block !important;
  }
  table.menu.small-vertical td {
    display: block !important;
  }
  table.menu.small-vertical th {
    display: block !important;
  }
  table.menu[align="center"] {
    width: auto !important;
  }
  table.button.small-expand {
    width: 100% !important;
  }
  table.button.small-expanded {
    width: 100% !important;
  }
  table.button.small-expand table {
    width: 100%;
  }
  table.button.small-expanded table {
    width: 100%;
  }
  table.button.small-expand table a {
    text-align: center !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important;
  }
  table.button.small-expanded table a {
    text-align: center !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important;
  }
  table.button.small-expand center {
    min-width: 0;
  }
  table.button.small-expanded center {
    min-width: 0;
  }
}
@media only screen and (max-width: 480px) {
  table#canspamBar td {
    font-size: 14px !important;
  }
  table#canspamBar td a {
    display: block !important; margin-top: 10px !important;
  }

}

If you can see what I'm missing, please let me know. I'm open to ideas. Thank you!

Is it possible that you are using an older version of the Gmail IOS app? Anything older than September 2016 will not support @media queries. — gwally, Oct 21 '17 at 00:21

Syfer · Answer 1 · 2017-10-29T23:51:49.900

6

Gmail is very very picky when it comes to media queries. You do any mistakes in your code, the whole line gets stripped away. From first glance I see you have space in the code and gmail will ignore it.

Currently:

@media only screen and (max-width: 596px) {

remove the space after the colon and give it a try. Make it:

@media only screen and (max-width:596px) {

I did a lot of testing after i settled on my boilerplate and it hasnt failed me yet.

Also very importantly, Gmail will only read the first media query, so if you plan to target gmail with your media query then place all the supported ones in the first query. If you want to use more then you can use them to support other devices/email clients.

UPDATE:

The below code will work in gmail app.

<html>
  <head>
    <style>
      .colored {
        color: #000000;
      }
      #body {
        font-size: 26px;
      }
      @media only screen and (max-width:480px) {
        .colored {color: #ff0000 !important;}
      }
    </style>
  </head>
  <body>
    <div id='body'>
      <p>Hi Pirce,</p>
      <p class='colored'>
        This text is blue if the window width is
        below 500px and red otherwise.
      </p>
      <p>Jery</p>
    </div>
  </body>
</html>

Hope this answer helps.

edited Oct 29 '17 at 23:51

answered Oct 22 '17 at 07:43

Syfer

4,262
3
20
37

Hello Syfer, can you please provide some code. i have use the code provided by google `

Hi Pirce,

This text is blue if the window width is below 500px and red otherwise.

Jery

` no good. – eric bon Oct 24 '17 at 04:20
ah ignore that ill put it as a new answer. – eric bon Oct 24 '17 at 04:22
That code will work on emails that support style in the head. Which email client did you use to test? – Syfer Oct 24 '17 at 04:26
Thank you, but that didn't do it for me. I was even trying with only one media query. – C. Coleman Oct 24 '17 at 16:08
Quite a late reply. The update I did to my post has the tested code that works on both Gmail and Gmail app. What are you using to send and whoch version of app are you using to test? – Syfer Feb 12 '18 at 07:30
1

I found this didn't work for me until I moved out the media query CSS into its own ` – Dan Oct 09 '18 at 08:20

score 0 · Answer 2 · answered Oct 20 '17 at 19:43

0

Making email templates has some rules you might have to keep in mind:

Ideally use inline-style, not style tag
Fluid layout, not responsive, meaning avoid using media-queries
Tables over div, might be harder to code but will have a better display across the different email boxes
Code it like 1993, really, the oldest standard you use, you are more likely to avoid getting in spam and problems with the layout

In the case of Gmail it has a fixed space resolution for the email display, that's why it won't shrink nor expand despite you move the width panels, ergo ignoring media-queries.

Best solution posible, is to use tables with table-layout: fixed and don't media queries at all.

answered Oct 20 '17 at 19:43

Nicolas M. Pardo

753
1
6
16

Gmail has been supporting media queries for a year now, so it best to start using it. Gmail is strict when it comes to media queries so it has to be coded properly for it to work. – Syfer Oct 23 '17 at 00:27
@Syfer do you know how to code it with the media query properly? – mending3 Nov 11 '21 at 15:44
@mending3 I have an answer above that works on Android. iOS should be same. Give it ago. – Syfer Nov 18 '21 at 05:53

Why is Gmail ignoring my media queries? (On iOS)

2 Answers2