email design looking different in outlook in comparison to other email clients

Question

I am working on html emails in which I have replicated a design using html and inline styles.

In the outlook, I am seeing the following design:

Design in the fiddle:

Attached is the fiddle for that where I have mentioned all my html and inline styles. In the fiddle, I am getting the different design in comparison to the design (Outlook) above.

Problem Statement:

I am wondering what changes I should do in the inline style of the fiddle so that the design in the fiddle and in the screenshot(outlook) above both looks the same.

The space beneath the text Steps to earn your money is too much in the outlook screenshot in comparison to the design in the fiddle. The snippets of code which I have used in that section are:

<tr>
   <td>
      <table cellpadding="0" cellspacing="0" border="0" width="100%" style="padding-left:15%;padding-bottom:25%;">
         <tr>
            <td>
               <h2 style="text-align: left;
                  padding-left: 19%;
                  color: #484848;
                  padding-top: 2.5%;
                  padding-bottom: 5%;
                  padding-right: 12%;">steps to earn your money:</h2>
            </td>
         </tr>
         <tr style="text-align:left;color:#484848;font-size:20px;">
            <td>
               1. click here to open the XYZ app to the posting requests page<br><br>
               2. click on availability check request<br><br>
               3. say yes, its availabile ot suggest another date it is<br><br>
               4. wait the 1 or 24 hour confirmation good<br><br>
               5. three days after the booking ends money will be send to your account<br><br>
            </td>
         </tr>
      </table>

Did you try opening dev tools (F12) and inspecting the table in the email to see what styles are being applied? — Joseph Webber, Jun 23 '18 at 17:47
@JosephWebber I have used litmus.com to do email testing and in it I have received screenshots for different clients. — flash, Jun 23 '18 at 17:52
@JosephWebber Yes, I did that. I am using inline styling and all the styles are mentioned there. — flash, Jun 23 '18 at 17:52
@JosephWebber In the outlook screenshot, it is creating an unnecessary space beneath `Steps to earn your money` text and it is shifted towards left as well, not sure why. — flash, Jun 23 '18 at 17:56
Outlook cannot support padding. You'll need to use other means to create spacing around your elements such as adding empty table rows/cols or adding `height`/`line-height`/`width`/`text-align` styles. — Joseph Webber, Jun 26 '18 at 15:50
@JosephWebber Is there any we can fix that ? Because replacement of margin and padding such `height/line-height/width/text-align` will take huge amount of time to fix. — flash, Jun 26 '18 at 16:05
@JosephWebber [Here](https://stackoverflow.com/questions/20347803/margin-in-html-not-working-in-outlook) its written, we can use padding instead of margin. — flash, Jun 26 '18 at 16:25
I checked a few more sources and apparently padding _does_ work in Outlook, but only if you follow best practices. See [this](https://stackoverflow.com/questions/21474239/css-padding-is-not-working-in-outlook) post. — Joseph Webber, Jun 26 '18 at 16:47
Aren't you simply haven't added "font-size" to your h2 style directly? Because of that, outlook uses it's default h2 sizes, which in comparison to web standards is different. — Maximus Light, Jul 03 '18 at 14:53

score 2 · Answer 1 · answered Jun 24 '18 at 03:55

Had a quick check of your code and here is what i found:

You had the td and tr swapped at line 17 and 18 (just as Jason above mentioned)
You are using padding as percentage (line 55 i fixed). Its not a good idea, keep it at pixels for peace of mind. Change to pixels in other places as well.

<html>
<body>


 
  <table cellpadding="0" cellspacing="0" border="0" width="800" class="mobile"  align="center">

   <tr>
   <td>
   <table cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr>
            <td style="padding-left:6%;padding-bottom:5%;font-size:20px;color:#55BEC7;"> hi ABC,</td>
            
          </tr>
         
        </table>
</td>
  </tr>
  
 <tr>
      <td>
        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-size:20px;padding-left:5%;">
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">type:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">availability check request</td>
          </tr>
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">estimated total:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">$250.00</td>
          </tr>
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">what</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">chainsaw</td>
          </tr>
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">how many</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">2</td>
          </tr>
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">when:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">Mar 28/18 @ 7:00pm to <br> Mar 30/18 @ 7:00pm</td>
          </tr>
          <tr>
            <td style="padding-bottom: 3%;text-align:right;">who:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;color:#FF8D58;">John s</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="padding-left:15%;padding-bottom:25%;">
          <tr>
            <td>
              <h2 style="text-align: left;
    padding-left: 20px;
    color: #484848;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-right: 20px;">steps to earn your money:</h2>
            </td>
          </tr>
          <tr style="text-align:left;color:#484848;font-size:20px;">
            <td>
                 1. click here to open the XYZ app to the posting requests page<br><br>
                 2. click on availability check request<br><br>
                 3. say yes, its availabile ot suggest another date it is<br><br>
                 4. wait the 1 or 24 hour confirmation good<br><br>
                 5. three days after the booking ends money will be send to your account<br><br>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

Hope this helps.

Hi Syfer, can you update it in the [fiddle](https://jsfiddle.net/2zg6xcky/3/), whatever you want me to scrap (from your 1st point) ? — flash, Jun 24 '18 at 22:01
The padding will be dependent on your design. Change the padding from percentage to pixels. — Syfer, Jun 27 '18 at 10:25
If you want me to remove line#17 and line#18, then do you want me to remove line# 7 and 8 as well ? — flash, Jun 27 '18 at 15:18
no, what does your design look like? Or what do you want it to look like? Just change the percentage value to pixels and it should change/fix it. Dont take the pixel value over 20px or it will look odd. — Syfer, Jun 27 '18 at 21:38

email design looking different in outlook in comparison to other email clients

1 Answers1

Linked