Gmail mobile responsiveness issue for custom email layout

Other Questions Gmail
1

Hey everyone, I’m having trouble with my email design not adapting properly on mobile Gmail. I’ve created a table layout with images and text in a row. It works fine on desktop and Outlook mobile, but Gmail’s not playing nice.

I want the row to stack into a column on smaller screens and change the background color. My media queries are doing the job in Outlook, but Gmail’s ignoring them completely. Here’s a simplified version of my code:

<style>
  @media screen and (max-width: 480px) {
    .mobile-stack { display: block; width: 100%; }
    .mobile-bg { background-color: #f1f1f1; }
  }
</style>

<table width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td class="mobile-stack mobile-bg" width="33%">
      <img src="placeholder.jpg" alt="">
      <p>Some text here</p>
    </td>
    <td class="mobile-stack mobile-bg" width="33%">
      <img src="placeholder.jpg" alt="">
      <p>More text here</p>
    </td>
    <td class="mobile-stack mobile-bg" width="33%">
      <img src="placeholder.jpg" alt="">
      <p>Extra text here</p>
    </td>
  </tr>
</table>

Any ideas on how to make this responsive in Gmail? I’ve been scratching my head for ages! Thanks for any help!

2

hey ryan, gmail’s a pain with css. try using align=“left” on ur td’s and set widths to 100% for mobile. maybe use inline styles instead of media queries. also, nest tables for each cell - gmail likes that. good luck mate!

3

I’ve encountered similar issues with Gmail’s mobile rendering. Unfortunately, Gmail strips out tags and doesn’t support media queries, making responsive design challenging. One workaround I’ve found effective is using Ghost Tables. Essentially, you create two versions of your content - one for desktop and one for mobile - and use conditional comments to hide/show the appropriate version. For Gmail, you’d use MSO conditional comments to hide the mobile version on desktop. This approach requires more code but ensures consistent rendering across clients. Another tip: keep your layout simple and use percentage-based widths where possible to improve adaptability. It’s not a perfect solution, but it’s helped me achieve better results in Gmail.

4

I’ve been down this road before, and Gmail’s definitely a tough nut to crack when it comes to responsive design. One thing that’s worked well for me is using a fluid hybrid approach. Instead of relying on media queries, which Gmail ignores, you can set up your layout to naturally stack on mobile.

Try setting your table to 100% width, then use max-width on the containing cells to control desktop layout. For example:

<table width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table width="100%" cellspacing="0" cellpadding="0">
        <tr>
          <td style="max-width: 33.33%; padding: 10px;">
            <!-- Content here -->
          </td>
          <!-- Repeat for other cells -->
        </tr>
      </table>
    </td>
  </tr>
</table>

This way, on desktop, the max-width keeps things in check, while on mobile, it naturally flows full-width. It’s not perfect, but it’s been pretty reliable for me across various email clients, including Gmail.