Menu
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>
315
Had a quick check of your code and here is what i found:
<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.
75
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
