Responsive email width in Gmail

Question

I have this email template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>title</title>
    <style type="text/css">
    img { max-width: 600px;  -ms-interpolation-mode: bicubic;}
    .ReadMsgBody { width: 100%; }
    .ExternalClass {width:100%;}
    .backgroundTable {margin:0 auto; padding:0; width:100%;!important;}
    body {
      width: 100%;
      height: 100%;
      direction: rtl;
    }
    .force-full-width {
      width: 100% !important;
    }
    </style>
    <style type="text/css" media="only screen and (max-width: 599px)">
      @media only screen and (max-width: 599px) {
        table[class*="w320"] {
          width: 320px !important;
        }
      }
    </style>
  </head>
  <body dir="rtl" class="body" style="width:100vw; padding:0; margin:0; display:block; background:#ffffff; -webkit-text-size-adjust:none" bgcolor="#ffffff">
  <table align="center" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td align="center" valign="top" style="background-color:#ffffff" width="100%">
      <center>
        <table cellspacing="0" cellpadding="0" width="600" class="w320">
          <tr>
            <td align="center" valign="top">
              <table class="force-full-width"  width="100%" cellspacing="0" cellpadding="20" bgcolor="#ef6900">
                <tr>
                  <td style="background-color:#ef6900; color:#ffffff; font-size: 14px; text-align: center;">
                    Some text
                  </td>
                </tr>
              </table>
              <!-- more tables -->
            </td>
          </tr>
        </table>
      </center>
      </td>
    </tr>
  </table>
  </body>
</html>

It does work on Gmail app in Android, but in desktop version email content overflows <u></u>. If I remove width:100vw; from body tag, desktop works fine but content overflows in mobile version. My Question is How can I make body width 100% in mobile and 600px on desktop? I tried max-width: 600px; in body style but it doesn't work. I also tried 100% instead of 100vw (because 100 vw is width of screen) and it does not work either.

score 1 · Accepted Answer · answered Mar 15 '18 at 23:28

I made a few changes, hope this is the outcome you were after. I have done the following:

removed width:100vwfrom the body
added the class body you are using on the body tag with the body CSS defined.
Changed the media query (removed space)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>title</title>
 <style type="text/css">img { max-width: 600px;  -ms-interpolation-mode: bicubic;}
    .ReadMsgBody { width: 100%; }
    .ExternalClass {width:100%;}
    .backgroundTable {margin:0 auto; padding:0; width:100%;!important;}
    body, .body {
      width: 100%;
      height: 100%;
      direction: rtl;
    }
    .force-full-width {
      width: 100% !important;
    }
 </style>
 <style media="only screen and (max-width: 599px)" type="text/css">@media only screen and (max-width:599px) {
        table.w320 {
          width: 320px !important;
        }
      }
 </style>
</head>
<body bgcolor="#ffffff" class="body" dir="ltr" style="padding:0; margin:0; display:block; background:#ffffff; -webkit-text-size-adjust:none">
<table align="center" cellpadding="0" cellspacing="0" width="100%">
 <tbody>
  <tr>
   <td align="center" style="background-color:#ffffff" valign="top" width="100%">
   <center>
   <table cellpadding="0" cellspacing="0" class="w320" width="600">
    <tbody>
     <tr>
      <td align="center" valign="top">
      <table bgcolor="#ef6900" cellpadding="20" cellspacing="0" class="force-full-width" width="100%">
       <tbody>
        <tr>
         <td style="background-color:#ef6900; color:#ffffff; font-size: 14px; text-align: center;">Some text</td>
        </tr>
       </tbody>
      </table>
      <!-- more tables --></td>
     </tr>
    </tbody>
   </table>
   </center>
   </td>
  </tr>
 </tbody>
</table>
</body>
</html>

Above code tested in Outlook 2017 and Gmail app (v8.2.11) works properly now.

If you have any questions let me know.

score 0 · Answer 2 · answered Mar 15 '18 at 14:07

0

Your email will work just fine if you remove width:100vw; from the body tag.

answered Mar 15 '18 at 14:07

gwally

3,349
2
14
28

No it doesn't. Only half of email is visible, and the rest overflows. – Niloofar Mar 15 '18 at 14:35
I'm not sure what you are doing, but I tested the code you posted in Litmus against every major email client, then tested it by sending my version to Gmail from Putsmail. Your version shifts things to the right. My version works just fine, but is not fully centered in mobile Android. – gwally Mar 15 '18 at 14:52
That's right my version shifts everything to the right, How can I fix that? – Niloofar Mar 15 '18 at 15:03
I fixed the desktop version by removing `width:100vw;` from the body tag. It leaves the Android version with a wider left margin, but the table is still in the body of the email. – gwally Mar 15 '18 at 15:15

Responsive email width in Gmail

2 Answers2