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!

Answer 1

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.