CODEWITHSUNDEEP
htmlcsshtml-email
Noym
Noym

Reputation: 41

How to write a Responsive Html Email in Gmail

I am trying to develop mail in html and css (emails can only be developed in this). Is there a reason Gmail no longer supports Media Queries? A paragraph that I defined on the desktop that will be centered and on mobile will be with alighn left, in practice also centered on the desktop version (set in media query). In addition, I have two images, one of which is supposed to be displayed in the desktop version and the other in the mobile version, in practice only the image of the mobile version is displayed. I will note that in other mail clients it does work, only in Gmail it does not work. I would be happy for your help please, as it has worked for me in the past and now no longer. And if Media Query is really not possible with Gmail, how can it be otherwise? My code is attached:

<!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" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name=”x-apple-disable-message-reformatting”>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  <title></title>
  <style type="text/css">
    body{
      Margin: 0;
      padding: 0;
      min-width: 100%;
      background-color: #F3F3F3;
      font-family: 'Poppins', Helvetica, Arial, sans-serif;
    }
    table{
      border-spacing: 0;
    }
    td{
      padding: 0;
    }
    img{
      border: 0;
    }

    @media screen and (min-width: 600px) {

      .desktop-img{
        display: block!important;
      }
      .mobile-img{
        display: none!important;
      }
    }
    @media screen and (max-width: 600px) {

      p{
        margin: 3.75rem 1.875rem 1rem 1.875rem!important;
        text-align: left!important;
      }

      .desktop-img{
        display: none!important;
        overflow: hidden!important;
      }
      .mobile-img{
        display: block!important;
        overflow: visible!important;
      }
    }

  </style>
  <!--[if mso]>
  <style>
    body{
      font-family: Helvetica, Arial, sans-serif!important;
      text-align: center!important;
      display: inline-block!important;
    }
    table{
      border-collapse: collapse!important;
    }
  </style>
  <![endif]-->
</head>
<body>
<div style="width: 100%; table-layout: fixed; background-color: #F3F3F3; padding-bottom: 20px; text-align: center;-webkit-text-size-adjust:none;">
  <table style="background-color: white; margin: 0 auto; width: 100%; max-width: 600px; color: #0C0E1A; border-spacing: 0; padding-bottom: 20px;direction: ltr;" role="presentation" width="100%" align="center">

    <tr>
      <td>
        <!-- body text -->
        <p style="margin: 70px 40px 40px 40px; text-align: center; font-weight: 500; font-size: 20px; line-height: 30px;color: #3958FF;">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </td>
    </tr>
    <tr>
      <td>
        <!-- Desktop Image -->
        <img class="desktop-img" src="https://images.easytechjunkie.com/desktop-computer-and-screen.jpg" alt="desktop" style="width: 90%;"/>
        <!-- Mobile Image -->
        <img class="mobile-img" src="https://d124ep1ou7ef1k.cloudfront.net/wp-content/uploads/2022/03/Galaxy_A53_5G_MA_Thumb.jpg" alt="mobile" style="width: 100%;display: none;"/>
      </td>
    </tr>
  </table>
  </table>
</div>
</body>
</html>

Upvotes: 2

Views: 2085

Answers (1)

rootShiv
rootShiv

Reputation: 1427

there is a technique called The Fab Four technique you can use to create responsive html templet for email. Here's great article by freecodecamp of how to implement it. Here's their example as well.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The Fab Four</title>
    <style>
        html, body { min-width:260px; min-height:100%; padding:0; Margin:0 auto; background:#fff; }
        a img { border:none; }
        .ReadMsgBody { width:100%; }
        .ExternalClass { width:100%; }
        .ExternalClass * { line-height:100%; }
        table, td { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
    </style>
    <style type="text/css">
        @media only screen and (max-width:480px) {
            @-ms-viewport { width:320px; }
            @viewport { width:320px; }
        }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--[if !mso]><!-- -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--<![endif]-->
</head>
<body>
    <!--[if mso]>
    <table border="0" cellpadding="0" cellspacing="0" width="800" align="center" bgcolor="#ffffff" style="width:800px;"><tr><td>
    <![endif]-->
    <div style="Margin:0 auto; max-width:800px; min-width:260px; font:16px sans-serif;">
        <div style="text-align:center; font-size:0;">
            <div style="width:190px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(190px); width:calc(230400px - 48000%); min-width:calc(190px);">
                <h1 style="Margin:20px auto; color:#231f20; font:bold 32px sans-serif; text-align:left; width:190px; letter-spacing:-0.05em;">The Fab Four</h1>
            </div>
        </div>
        <div style="text-align:center; font-size:0;">
            <!--[if mso]>
            <table border="0" cellpadding="0" cellspacing="0" width="800" align="center" bgcolor="#ffffff" style="width:800px;"><tr><td style="background:#27AAE1;">
            <![endif]-->
            <div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#27AAE1; vertical-align:top; width:25%; min-width:120px; max-width:50%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(25%); width:calc(230400px - 48000%); min-width:calc(25%);">
                <a href="https://dribbble.com/shots/2012212-Ringo-John" target="_blank"><img src="http://emails.hteumeuleu.fr/wp-content/uploads/2016/02/ringo.png" alt="" width="200" style="display:block; width:100%; height:auto; max-width:240px;" border="0" /></a>
            </div>
            <!--[if mso]>
            </td><td style="background:#F05A41;">
            <![endif]-->
            <div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#F05A41; vertical-align:top; width:25%; min-width:120px; max-width:50%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(25%); width:calc(230400px - 48000%); min-width:calc(25%);">
                <a href="https://dribbble.com/shots/2012212-Ringo-John" target="_blank"><img src="http://emails.hteumeuleu.fr/wp-content/uploads/2016/02/john.png" alt="" width="200" style="display:block; width:100%; height:auto; max-width:240px;" border="0" /></a>
            </div>
            <!--[if mso]>
            </td><td style="background:#FACF39;">
            <![endif]-->
            <div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#FACF39; vertical-align:top; width:25%; min-width:120px; max-width:50%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(25%); width:calc(230400px - 48000%); min-width:calc(25%);">
                <a href="https://dribbble.com/shots/2012203-Paul-George" target="_blank"><img src="http://emails.hteumeuleu.fr/wp-content/uploads/2016/02/george.png" alt="" width="200" style="display:block; width:100%; height:auto; max-width:240px;" border="0" /></a>
            </div>
            <!--[if mso]>
            </td><td style="background:#F266B6;">
            <![endif]-->
            <div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#F266B6; vertical-align:top; width:25%; min-width:120px; max-width:50%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(25%); width:calc(230400px - 48000%); min-width:calc(25%);">
                <a href="https://dribbble.com/shots/2012203-Paul-George" target="_blank"><img src="http://emails.hteumeuleu.fr/wp-content/uploads/2016/02/paul.png" alt="" width="200" style="display:block; width:100%; height:auto; max-width:240px;" border="0" /></a>
            </div>
            <!--[if mso]>
            </td></tr></table>
            <![endif]-->
        </div>
        <div style="text-align:center; font-size:0;">
            <!--[if mso]>
            <table border="0" cellpadding="0" cellspacing="0" width="800" align="center" bgcolor="#ffffff" style="width:800px;"><tr><td style="background:#27AAE1;">
            <![endif]-->
            <div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#27AAE1; vertical-align:top; width:25%; min-width:120px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(25%); width:calc(230400px - 48000%); min-width:calc(25%);">
                <p style="Margin:16px;">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                </p>
            </div>
            <!--[if mso]>
            </td><td style="background:#F05A41;">
            <![endif]-->
            <div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#F05A41; vertical-align:top; width:25%; min-width:120px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(25%); width:calc(230400px - 48000%); min-width:calc(25%);">
                <p style="Margin:16px;">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                </p>
            </div>
            <!--[if mso]>
            </td><td style="background:#FACF39;">
            <![endif]-->
            <div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#FACF39; vertical-align:top; width:25%; min-width:120px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(25%); width:calc(230400px - 48000%); min-width:calc(25%);">
                <p style="Margin:16px;">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                </p>
            </div>
            <!--[if mso]>
            </td><td style="background:#F266B6;">
            <![endif]-->
            <div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#F266B6; vertical-align:top; width:25%; min-width:120px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(25%); width:calc(230400px - 48000%); min-width:calc(25%);">
                <p style="Margin:16px;">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                </p>
            </div>
            <!--[if mso]>
            </td></tr></table>
            <![endif]-->
        </div>
        <div style="text-align:center; font-size:0; background:#FACF39;">
            <!--[if mso]>
            <table border="0" cellpadding="0" cellspacing="0" width="800" align="center" bgcolor="#ffffff" style="width:800px;"><tr><td style="width:40%; background:#FACF39;">
            <![endif]-->
            <div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#FACF39; vertical-align:top; width:40%; min-width:120px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(40%); width:calc(230400px - 48000%); min-width:calc(40%);">
                <p style="Margin:16px;">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                </p>
            </div>
            <!--[if mso]>
            </td><td style="width:60%; background:#27AAE1;">
            <![endif]-->
            <div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#27AAE1; vertical-align:top; width:60%; min-width:120px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(60%); width:calc(230400px - 48000%); min-width:calc(60%);">
                <p style="Margin:16px;">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente error quisquam facere ex harum dolores qui.
                </p>
            </div>
            <!--[if mso]>
            </td></tr></table>
            <![endif]-->
        </div>
        <div style="text-align:center; font-size:0; background:#F05A41;">
            <!--[if mso]>
            <table border="0" cellpadding="0" cellspacing="0" width="800" align="center" bgcolor="#ffffff" style="width:800px;"><tr><td style="width:33%; background:#F266B6;">
            <![endif]-->
            <div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#F266B6; vertical-align:top; width:33%; min-width:160px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(33%); width:calc(230400px - 48000%); min-width:calc(33%);">
                <p style="Margin:16px;">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                </p>
            </div>
            <!--[if mso]>
            </td><td style="width:34%; background:#F05A41;">
            <![endif]-->
            <div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#F05A41; vertical-align:top; width:34%; min-width:160px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(34%); width:calc(230400px - 48000%); min-width:calc(34%);">
                <p style="Margin:16px;">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                </p>
            </div>
            <!--[if mso]>
            </td><td style="width:33%; background:#FACF39;">
            <![endif]-->
            <div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#FACF39; vertical-align:top; width:33%; min-width:160px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(33%); width:calc(230400px - 48000%); min-width:calc(33%);">
                <p style="Margin:16px;">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                </p>
            </div>
            <!--[if mso]>
            </td></tr></table>
            <![endif]-->
        </div>
        <p style="Margin:10px 0; color:#aaa; font:13px/1.5 sans-serif; text-align:right;">
            Illustrations by <a href="https://dribbble.com/elias" target="_blank" style="color:#aaa;">Elias Stein</a>
        </p>
    </div>
    <!--[if mso]>
    </td></tr></table>
    <![endif]-->
</body>
</html>

Upvotes: 2

Related Questions