Gmail mobile app not applying responsive CSS styles to HTML email

Other Questions Gmail
1

I’m facing an issue where Gmail does not recognize my mobile media queries. I’ve designed an HTML email template with a table layout featuring three columns that showcase images and descriptions of products. While it displays correctly on desktop, I need these columns to appear in a vertical stack on mobile devices.

The media queries work flawlessly in Outlook’s mobile version, but Gmail seems to ignore them entirely, retaining the three horizontal columns on mobile, which makes reading difficult. Additionally, I can’t manage to change the background color on Gmail for mobile.

Here’s a simplified version of my code:

<style>
  @media screen and (max-width: 480px) {
    .container {
      background-color: #F5F5F5 !important;
    }
    .column {
      display: block !important;
      width: 100% !important;
    }
    .mobile-text {
      font-size: 16px !important;
    }
  }
</style>

<table class="container" width="100%" style="background-color: #FFFFFF; max-width: 600px;">
  <tr>
    <td>
      <h1>Product Showcase</h1>
    </td>
  </tr>
</table>

<table width="100%" style="max-width: 600px; background-color: #EEEEEE;">
  <tr>
    <td class="column" width="33.33%" style="padding: 15px;">
      <img src="product1.jpg" width="150" style="width: 100%; height: auto;">
      <p class="mobile-text" style="font-size: 12px;">
        <strong>Product One</strong><br>
        Description here<br>
        More details
      </p>
    </td>
    <td class="column" width="33.33%" style="padding: 15px;">
      <img src="product2.jpg" width="150" style="width: 100%; height: auto;">
      <p class="mobile-text" style="font-size: 12px;">
        <strong>Product Two</strong><br>
        Description here<br>
        More details
      </p>
    </td>
    <td class="column" width="33.33%" style="padding: 15px;">
      <img src="product3.jpg" width="150" style="width: 100%; height: auto;">
      <p class="mobile-text" style="font-size: 12px;">
        <strong>Product Three</strong><br>
        Description here<br>
        More details
      </p>
    </td>
  </tr>
</table>

I’ve tested this on both Android and iPhone versions of the Gmail app, and the results are the same. Can anyone suggest how to ensure Gmail acknowledges responsive email styles?

2

yeah, gmail really struggles with media queries. try using inline styles for better mobile compatibility and set max-width directly on tables. it’s not fun but it might help!

3

Gmail’s terrible at handling CSS in emails, especially on mobile. Had the same headache last year with client newsletters. Here’s what actually fixed it for me: use @media only screen instead of just @media screen in your media queries. Also, dump your CSS in <style type="text/css"> tags inside the body, not the head - Gmail’s mobile app handles body styles way better. For background colors, use both the CSS property AND the old bgcolor attribute on your tables. Gmail mobile falls back to HTML attributes when CSS craps out. Throw !important on everything too - Gmail sometimes needs that extra kick to override its defaults. Before you send anything, test it with Litmus or Email on Acid to see how different Gmail versions actually render your code.

4

Gmail’s CSS support is awful, especially for media queries in their mobile apps. The Android app just strips out most CSS from the <head> section - that’s why your responsive styles aren’t working. I’ve hit this same problem with my email campaigns. What saved me was switching to a hybrid approach with conditional table structures. Don’t rely on media queries to change display properties. Instead, create nested tables that stack naturally on smaller screens by setting specific widths and using align="left" attributes. For the background color problem - Gmail ignores CSS background properties all the time. Use the bgcolor attribute directly on your table elements as backup. You can also try mso-hide classes to show different content blocks for different clients, though that gets pretty complex. Honestly, Gmail’s rendering engine sucks compared to other email clients. You’ll probably need to go mobile-first and accept that desktop won’t look perfect if you want mobile to be readable.