html - Email is not responsive to mobile on Gmail - Stack Overflow

admin管理员组

文章数量:1384131

Currently I am coding an email with a table containing a row showing images and text. I want to display it as a row on desktop but then on mobile I want to display the row as a column vertically on mobile. In the styles tag, I have added formatting for mobile and this works perfectly with Outlook on mobile and desktop. However, it looks like it is not responsive on Gmail and is showing the row horizontally on mobile. (Additionally, I want to change the background color on mobile which is also working on Outlook but not on Gmail). I have been stuck on this for quite some time and have tried a few different fixes to no avail. I would appreciate it if someone could help me figure out how to make this also target Gmail clients. Thanks!

<style>
  @media screen and (max-width: 480px) {
    .reclaim {
      background-color: #E7E4DE !important;
    }
    p {
      line-height: 1.5 !important;
      /* Reduce line spacing on mobile */
      letter-spacing: -0.3px !important;
    }
    .stack {
      display: block !important;
      width: 100% !important;
    }
    .sg {
    font-size: 14px !important;
    }
  }
</style>

<table class="reclaim" role="presentation" width="100%" align="center" cellspacing="0" cellpadding="0" border="0" style="max-width: 624; font-family: Lato, sans-serif; background-color: #E5DED8; text-align: center;">
  <tr>
    <td style="padding-top: 20px;">
      <h2 style="margin: 0; color: #353535;">insert text here
      </h2>
    </td>
  </tr>
  <tr>
    <td style="margin: 10px 0px 10px; font-size: 14px; padding-right: 20px; padding-left: 20px; word-spacing: -1px; color: #353535;">
      <p>
        insert text here
      </p>      
    </td>
  </tr>
</table>

<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #f3f2ee; max-width: 624px; font-family: Lato, sans-serif; text-align: center; table-layout: fixed;" width="100%">
  <tr>
    <!-- First Image and Text -->
    <td class="stack" style="padding: 10px; vertical-align: top;" width="33.33%">
      <img src="image_link" style="max-width: 100%; height: auto; display: block; margin: 0 auto;" width="180">
      <p class="sg" style="font-size: 13px; margin: 5px 0 0; color: #353535;">
        <strong>text</strong>
        <br>
        text
        <br>
        text
      </p>
    </td>
    <!-- Second Image and Text -->
    <td class="stack" style="padding: 10px; vertical-align: top;" width="33.33%">
      <img src="image_link" style="max-width: 100%; height: auto; display: block; margin: 0 auto;" width="180">
      <p class="sg" style="font-size: 13px; margin: 5px 0 0; color: #353535;">
        <strong>text</strong>
        <br>
          text
        <br>
        text
      </p>
    </td>
    <!-- Third Image and Text -->
    <td class="stack" style="padding: 10px; vertical-align: top;" width="33.33%">
      <img src="image_link" style="max-width: 100%; height: auto; display: block; margin: 0 auto;" width="180">
      <p class="sg" style="font-size: 13px; margin: 5px 0 0; color: #353535;">
        <strong>text</strong>
        <br>
        text
        <br>
        text
      </p>
    </td>
  </tr>
</table>

The problem seems to be happening mainly on the Gmail app on Pixel phones, as seen on Email On Acid however it is not responsive to mobile on my iPhone either. If anyone could advise on the best practice for this problem I'd appreciate it!

Currently I am coding an email with a table containing a row showing images and text. I want to display it as a row on desktop but then on mobile I want to display the row as a column vertically on mobile. In the styles tag, I have added formatting for mobile and this works perfectly with Outlook on mobile and desktop. However, it looks like it is not responsive on Gmail and is showing the row horizontally on mobile. (Additionally, I want to change the background color on mobile which is also working on Outlook but not on Gmail). I have been stuck on this for quite some time and have tried a few different fixes to no avail. I would appreciate it if someone could help me figure out how to make this also target Gmail clients. Thanks!

<style>
  @media screen and (max-width: 480px) {
    .reclaim {
      background-color: #E7E4DE !important;
    }
    p {
      line-height: 1.5 !important;
      /* Reduce line spacing on mobile */
      letter-spacing: -0.3px !important;
    }
    .stack {
      display: block !important;
      width: 100% !important;
    }
    .sg {
    font-size: 14px !important;
    }
  }
</style>

<table class="reclaim" role="presentation" width="100%" align="center" cellspacing="0" cellpadding="0" border="0" style="max-width: 624; font-family: Lato, sans-serif; background-color: #E5DED8; text-align: center;">
  <tr>
    <td style="padding-top: 20px;">
      <h2 style="margin: 0; color: #353535;">insert text here
      </h2>
    </td>
  </tr>
  <tr>
    <td style="margin: 10px 0px 10px; font-size: 14px; padding-right: 20px; padding-left: 20px; word-spacing: -1px; color: #353535;">
      <p>
        insert text here
      </p>      
    </td>
  </tr>
</table>

<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #f3f2ee; max-width: 624px; font-family: Lato, sans-serif; text-align: center; table-layout: fixed;" width="100%">
  <tr>
    <!-- First Image and Text -->
    <td class="stack" style="padding: 10px; vertical-align: top;" width="33.33%">
      <img src="image_link" style="max-width: 100%; height: auto; display: block; margin: 0 auto;" width="180">
      <p class="sg" style="font-size: 13px; margin: 5px 0 0; color: #353535;">
        <strong>text</strong>
        <br>
        text
        <br>
        text
      </p>
    </td>
    <!-- Second Image and Text -->
    <td class="stack" style="padding: 10px; vertical-align: top;" width="33.33%">
      <img src="image_link" style="max-width: 100%; height: auto; display: block; margin: 0 auto;" width="180">
      <p class="sg" style="font-size: 13px; margin: 5px 0 0; color: #353535;">
        <strong>text</strong>
        <br>
          text
        <br>
        text
      </p>
    </td>
    <!-- Third Image and Text -->
    <td class="stack" style="padding: 10px; vertical-align: top;" width="33.33%">
      <img src="image_link" style="max-width: 100%; height: auto; display: block; margin: 0 auto;" width="180">
      <p class="sg" style="font-size: 13px; margin: 5px 0 0; color: #353535;">
        <strong>text</strong>
        <br>
        text
        <br>
        text
      </p>
    </td>
  </tr>
</table>

The problem seems to be happening mainly on the Gmail app on Pixel phones, as seen on Email On Acid however it is not responsive to mobile on my iPhone either. If anyone could advise on the best practice for this problem I'd appreciate it!

• html
• css
• email
• gmail
• html-email

Share Improve this question Follow asked Mar 17 at 20:57 user29985052user29985052 1 1

• Have you checked caniemail - for example it appears @media is not fully supported by gmail in all circumstances. – A Haworth Commented Mar 17 at 21:14

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Sometimes Gmail will remove entire <style> blocks for one thing it doesn't like. Perhaps it doesn't like one of these lines:

  /* Reduce line spacing on mobile */
  letter-spacing: -0.3px !important;

But some versions of Gmail, and some scenarios such as after clicking 'View full email' from a long email, don't support style blocks at all.

You're better off making the template mobile first (i.e. width=100% inline), and using the media queries for desktops (i.e. min-width).

The only real difficulty (not too hard) is Outlook Windows, which doesn't listen to media queries. Just use a conditional style block like so:

<!--[if mso]>.stack {width: 33.33% !important;}<![endif]-->

本文标签： htmlEmail is not responsive to mobile on GmailStack Overflow