CODEWITHSUNDEEP
htmlcssemail
gregstee
gregstee

Reputation: 11

Having trouble with inline block not working in an HTML email

I've been trying to write my first HTML email. I have written it using tables as I know HTML emails don't like HTML5. All I am trying to do is make it responsive so the 3 images in a row go in a vertical line. When I resize it currently, only the last of the three images moves responsively. I have looked and looked through the code and I can't see where I am going wrong. Any help would be greatly appreciated.

body {
  Margin: 0;
  padding: 0;
  background-color: #f6f9fc;
}

table {
  border-spacing: 0;
}

td {
  padding: 0;
}

img {
  border: 0;
}

.wrapper {
  width: 100%;
  table-layout: fixed;
  background-color: #f6f6f6;
  padding-bottom: 40px;
}

.webkit {
  max-width: 600px;
  background-color: #ffffff;
}

.outer {
  Margin: 0 auto;
  width: 100%;
  max-width: 600px;
  border-spacing: 0;
  font-family: sans-serif;
  color: #4a4a4a;
}

.three-columns {
  text-align: center;
  font-size: 0;
  line-height: 0;
  padding-top: 40px;
  padding-bottom: 30px;
}

.three-columns .column {
  width: 100%;
  max-width: 200px;
  display: inline-block;
  vertical-align: top;
}

.padding {
  padding-top: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
}

.three-columns .content {
  font-size: 15px;
  line-height: 20px;
}

a {
  text-decoration: none;
  color: #4a4a4a;
  font-size: 16px;
}

@media screen and (max-width: 600px) {
  img.third-img-last {
    width: 200px!important;
    max-width: 200px!important;
  }
  .padding {
    padding-right: 0!important;
    padding-left: 0!important;
  }
}

@media screen and (max-width: 400px) {
  img.third-img {
    width: 200px!important;
    max-width: 200px!important;
  }
}
<!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 http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" href="./RDFavicon.png">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Arvo&display=swap" rel="stylesheet">
  <title>Red Dot Recruitment</title>
</head>

<body>

  <center class="wrapper">
    <div class="webkit">

      <table class="outer" align="center">

        <tr>
          <td>
            <table width="100%" style="border-spacing: 0;">
              <tr>
                <td style="background-color: #ffffff;padding:10px;text-align:center;">
                  <a href=""><img src="reddotheader.png" width="480" alt="Logo" title="Logo"></a>
                </td>
              </tr>
            </table>
          </td>
        </tr>

        <tr>
          <td>
            <a href="https://www.reddotjobs.co.uk/"><img src="redarrowimage.png" width="600" alt="Red arrow banner" style="max-width: 100%;"></a>
          </td>
        </tr>



        <tr>
          <td>
            <table width="100%" style="border-spacing: 0;">
              <tr>
                <td class="three-columns">

                  <table class="column">
                    <tr>
                      <td class="padding">

                        <table class="content">
                          <tr>
                            <td>
                              <a href="#">
                                <img class="third-img" src="plug_sector_2.png" width="150" alt="Contact center staff" title="Contact Centre roles" style="max-width: 150px;">
                              </a>
                            </td>
                          </tr>
                          <tr>
                            <td style="padding: 10px">
                              <p style="font-size: 17px;font-weight: bold;">CONTACT CENTRE SENIOR ROLES</p>
                              <p>We deliver permanent and contract senior executives to UK Based Contact centres via our dedicated senior roles team.</p>
                              <a href="#">Learn more..</a>
                            </td>
                          </tr>
                        </table>

                      </td>
                    </tr>
                  </table>

                  <table class="column">
                    <tr>
                      <td class="padding">

                        <table class="content">
                          <tr>
                            <td>
                              <a href="#">
                                <img class="third-img" src="plug_sector_1.png" width="150" alt="Contact center staff" title="Contact Centre roles" style="max-width: 150px;">
                              </a>
                            </td>
                          </tr>
                          <tr>
                            <td style="padding: 10px">
                              <p style="font-size: 17px;font-weight: bold;">CONTACT CENTRE ROLES</p>
                              <p>We deliver permanent, contract and contingent staff to UK Based Contact centres.</p>
                              <a href="#">Learn more..</a>
                            </td>
                          </tr>
                        </table>

                      </td>
                    </tr>
                  </table>

                  <table class="column">
                    <tr>
                      <td class="padding">

                        <table class="content">
                          <tr>
                            <td>
                              <a href="#">
                                <img class="third-img-last" src="plug_sector_4.png" width="150" alt="Executive Search" title="Executive Search" style="max-width: 150px;">
                              </a>
                            </td>
                          </tr>
                          <tr>
                            <td style="padding: 10px">
                              <p style="font-size: 17px;font-weight: bold;">JOBS IN EDUCATION</p>
                              <p>We deliver permanent, contract and supply staff to Education facilities, ranging through Teaching Assistants, Teachers, Leadership, and support roles.</p>
                              <a href="#">Learn more..</a>
                            </td>
                          </tr>
                        </table>

                      </td>
                    </tr>
                  </table>

                </td>
              </tr>
            </table>
          </td>
        </tr>

        <tr>
          <td>
            <table width="100%" style="border-spacing: 0;">
              <tr>
                <td style="background-color:#FA343B;padding:15px;text-align:center;">

                  <p style="font-size:18px;color:#ffffff;Margin-bottom:13px;">Connect with us</p>
                  <a href="#"><img src="white-facebook.png" width="30" alt="Facebook logo"></a>
                  <a href="#"><img src="white-linkedin.png" width="30" alt="Linkedin logo"></a>
                </td>
              </tr>
            </table>
          </td>
        </tr>

        <tr>
          <td style="background-color: #ffffff">
            <table width="100%" style="border-spacing: 0;">

              <tr>
                <td style="padding:20px;text-align:center;">
                  <a href="#"><img src="reddotheader.png" alt="Red Dot Logo" width="360"></a>
                  <p>Phone number: </p>
                  <p>Email Address: </a>
                  </p>
                  <p>Address: </p>
                  </br>
                </td>
              </tr>
              <tr>
                <td style="background-color:#FA343B;padding:15px;text-align:center;">
                  <p style="font-size: 14px; color:#ffffff; Margin-top:18px; font-family:'Arvo',serif; line-height: 23px;">This message (and any associated files) is intended only for the use of the individual or entity to which it is addressed and may contain information that is confidential, subject to copyright or constitutes a trade secret. If you are
                    not the intended recipient you are hereby notified that any dissemination, copying or distribution of this message, or files associated with this message, is strictly prohibited. If you have received this message in error, please notify
                    us immediately by replying to the message and deleting it from your computer. Messages sent to and from us may be monitored.
                    </br>
                    </br>

                    Any views or opinions presented are solely those of the author and do not necessarily represent those of the company.</p>
                </td>
              </tr>

            </table>
          </td>
        </tr>

      </table>

    </div>
  </center>

</body>

</html>

Upvotes: 1

Views: 1804

Answers (1)

Jay Oram
Jay Oram

Reputation: 81

Display inline-block isn't supported on some elements, such as table, td, in all email clients. You need a Doctype to ensure it is applied and some email clients strip them or replace with an older version.

The use of th instead of td is more common. Without a doctype, WebKit (iOS mail) doesn't do anything if you apply a display:block to a td/table, but it works if you set it on a th.

 <table role="presentation" style="width:600px;" border="0" cellpadding="0" cellspacing="0" class="fullwidth">
 <tr>
<th class="columns" style="font-weight: normal;" align="center">
    <table role="presentation" width="300" style="width:300px;" border="0" cellpadding="0" cellspacing="0" class="fullwidth">
                  <tr>
                    <td align="center">
                        <img src="https://picsum.photos/300/300" alt="Alt text." width="300" height="300" style="display:block;"/>
                      </td>
                  </tr>
                </table>
 </th>
<th class="columns" style="font-weight: normal;" align="center">
<table role="presentation" width="260" style="width:260px;" border="0" cellpadding="0" cellspacing="0"> 
                  <tr>
                    <td align="center">
                       <p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat faucibus felis, in interdum nunc cursus ut. Nam mauris tortor, posuere tincidunt mattis sed, vehicula auctor turpis.</p>
                      </td>
                  </tr>
                </table>
</th>
</table>

CSS:

@media screen and (max-width:640px) {
.fullwidth {
   width: 100%!important;
    min-width: 100%!important;
    max-width: 1000px!important;
    height: auto!important;
}  
.columns {
    width: 100%!important;
    display: block!important;
}
}

I have a short example here: https://codepen.io/emailjay/pen/qBaELEv

Upvotes: 1

Related Questions