I'm making a responsive email template. The problem I'm encountering is that I want the icon to be align left of the text. How can I accomplish this? I've been stuck for while on this.
Edit: This is an updatey update with text words because I can't save my changes unless I have more wordy words and less codey code.
<body yahoo="yahoo" bgcolor="#f6f8f1">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table width="100%" bgcolor="#f6f8f1" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="header" bgcolor="c7d8a7">
<table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table width="70" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="70" style="padding: 0 20px 20px 0;">
<img src="http://i.imgur.com/38a0Gpi.png" width="70" height="70" border="0" alt="" />
<!--[if (gte mso 9)|(IE)]>
<table width="425" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col425" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 425px;">
<tr>
<td height="70">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="subhead" style="padding: 0 0 0 3px;">
COFFEE SHOP
</td>
</tr>
<tr>
<td class="h1" style="padding: 5px 0 0 0;">
Responsive Email Mockup
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
Like this?
I wrapped the image in a td of its own by adding </td><td> after the img
<td height="70" style="padding: 0 20px 20px 0;">
<img src="http://i.imgur.com/38a0Gpi.png" width="70" height="70" border="0" alt="" />
</td>
<td>
<!--[if (gte mso 9)|(IE)]>
Related
I am trying to make this piece work properly in outlook. I have text over an image that sits over a light blue background. I adjusted the z-index for each piece and played around with the positioning of each piece by setting them as relative and absolute. The background sits over the image just fine, but the text does not show. Below is the code. Any idea what is going wrong?
`
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="mobile-hide-outlook wrap-outlook" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div class="mobile-hide wrap" style="background:#F3F8FA;background-color:#F3F8FA;margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction: ltr; font-size: 0px; text-align: center; padding: 10px 30px;" align="center">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="vertical-align:top;padding:0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:480px;" width="480"><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;"><v:image style="border:0;height:220;mso-position-horizontal:center;position:absolute;top:0;width:480px;z-index:-1;" src="https://go.covetrus.com/l/935183/2022-10-10/c8dlg/935183/1665413087E22V6ADi/booth_photo.png" xmlns:v="urn:schemas-microsoft-com:vml" /><![endif]-->
<div style="margin:0 auto;max-width:600px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tr style="vertical-align:top;">
<td style="background:url('https://go.covetrus.com/l/935183/2022-10-10/c8dlg/935183/1665413087E22V6ADi/booth_photo.png') no-repeat right center / cover;background-position:center;background-repeat:no-repeat;padding:0px 0px;vertical-align:top;background-size:contain;">
<!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" style="width:480px;" width="480" ><tr><td style="z-index:0;position:absolute;"><![endif]-->
<div class="mj-hero-content" style="margin:0px auto;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;">
<tr>
<td style="padding: 40px 0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center" style="font-size:0px;padding:0px 340px 0px 50px;word-break:break-word;">
<div class="keep-white" style="font-family:'Mulish', Arial;font-size:24px;font-weight:500;line-height:28px;text-align:left;color:#FFFFFF;">Connect with us at the Covetrus<sup style="font-size:10px;line-height:10px">®</sup> <span style="color:#27BDBE">Booth #10059</span></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
`
I tried giving the background color the lowest z-index and then the background image the middle z-index and the text, the highest index. I also tried adjusting the position as absolute, fixed and relative. All to no avail. I cannot get the text to show up. This error is only in relation to outlook.
I have problem with the image background for email template. As you see the screenshots, I want the email in Outlook for Window 7/10 will display the same as Outlook for MacOS. But unfortunately, it doesn't work. I try many times but cannot figure out the reason why the body container always has the space between it and footer container. Please help me to solve this problem! My code is below
:(enter image description here
<!-- BODY START // -->
<tr>
<td>
<!--[if gte mso 9]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;" role="presentation">
<tr>
<td align="center" valign="top" width="600" style="width:600px;">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" mc:repeatable="" role="presentation" width="100%">
<tr>
<td background="http://test.agency-spring.digital/Bekreftelses/background-image.png" style="background-image:url(http://test.agency-spring.digital/Bekreftelses/background-image.png);background-repeat: no-repeat;
background-size:cover;background-position: center center;" bgcolor="#d1dce0" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="tile" src="http://test.agency-spring.digital/Bekreftelses/background-image.png" style="background-size:cover;background-position: center center;background-repeat: no-repeat;" color="#d1dce0" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<!-- test -->
<div>
<div style="">
<table role="presentation" class="templateContainer" width="600" style="width:600px;" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td height="" align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<!-- divider -->
<td width="600" padding="55px 30px 0"
style="width:100%;padding:55px 30px 0;border-spacing: 0;">
<table width="600" border="0" cellpadding="0" cellspacing="0" align="left" style="border-spacing: 0;">
<tbody>
<tr>
<td>
<table align="left" cellspacing="0" cellpadding="0" border="0" width="42" height="6" style="background:#e40532; height:6px;width:42px;">
<tr>
<td width="42" height="6" style="height:6px;width:42px;font-size:0; line-height:6px;">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<!-- end -->
</tr>
<tr class="row-1-column" mc:repeatable="" mc:variant="Row-1-column">
<td width="600" padding="5px 30px 0 30px"
style="width:100%;padding:5px 30px 0 30px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
width="100%">
<tbody>
<tr>
<td>
<div mc:edit="row1column__texta">
<h1>Tak for din bestilling!</h1>
<p> </p>
<p>{{Name}}</p>
<p>{{Address}}</p>
<p>Tlf. {{Phone}}</p>
<p>Reg.nr.: {{CarReg}}</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="row-1-column" mc:repeatable="" mc:variant="Row-1-column">
<td width="600" padding="25px 30px 0 30px"
style="width:100%;padding:25px 30px 0 30px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
width="100%">
<tbody>
<tr>
<td>
<div mc:edit="row1column__texta">
<p padding="20px 0" color="#e40532"
style="color:#e40532;font-weight: bolder;padding:20px 0 10px;">
Du har bestilt følgende:</p>
<p padding="20px 0" color="#e40532"
style="font-weight: bolder;padding:20px 0 10px; ">
{{OrderLines}}</p>
<p padding="20px 0" color="#e40532"
style="font-weight: bolder;padding:20px 0 10px;">
{{Services}}</p>
<p>Din bookede tid:<p>
<p padding="0" color="#e40532"
style="font-weight: bolder;padding:0;">
{{BookingTime}}
<span style="font-weight:normal"> hos
</span><span>{{Department}}</span></p>
<p padding="20px 0" style="padding:20px 0 10px;">Kontakt
din afdeling, hvis du vil ændre eller aflyse
din booking.</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="row-2-column" mc:repeatable="" mc:variant="Row-2-column">
<td width="600" padding="55px 30px 0" style="width:100%;padding:55px 30px 0;"
align="left">
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="left"
style="width: 100%;">
<tbody>
<tr>
<td width="270" style="width:50%;" align="left">
<table>
<tbody>
<tr>
<td>
<table align="left" cellspacing="0" cellpadding="0" border="0" width="18" height="4" style="background:#e40532; height:4px;width:18px;">
<tr>
<td width="18" height="4" style="height:4px;width:18px;font-size:0; line-height:4px;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<h2 padding="0 0 20px"
style="padding:0 0 20px;">Vi glæder os til<br> at servicere din bil
</h2>
<p style="line-height: 150%;">
Hvis du har spørgsmål - eller hvis der
er noget, der ikke stemmer, så
ring til os på <span
style="font-weight: bolder;">tlf. 7615 3000</span></p>
</td>
</tr>
</tbody>
</table>
</td>
<td width="270" style="width:50%;" padding="0">
<table width="270" style="width:100%;" align="left" cellspacing="0" cellpadding="0" border="0" style="max-width: 100%;width:270px;">
<tbody>
<tr>
<td>
<img width="270" style="max-width:100%; width:270px;height: auto;" src="http://test.agency-spring.digital/Bekreftelses/S%C3%B8ren.png" alt="Soren" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:fill>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- // BODY END -->
I've got an image within a relatively complex table structure and inside a td tag. I'm trying to make the image response so that when the page is viewed on mobile, the image is slightly scaled down vs. when viewed on a desktop i.e. ideally, I want it to be 50% of the width page.
I've tried adding a max-width on the img tag as well as the tg tag outside it and neither appeared to work.
My code:
<html>
<table bgcolor="#efefef" width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
<![endif]-->
<table width="100%" class="maxW" style="max-width: 600px; margin: auto;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" align="center">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td align="center">
<table width="94%" border="0" cellpadding="0" cellspacing="0" style="padding-bottom:10px">
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<table width="94%" border="0" cellpadding="0" cellspacing="0" style="padding-bottom:10px">
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="middle" style="font-family:Helvetica, Arial, sans-serif; font-size: 12px; color: #353535; padding:3%; padding-top:5px; padding-bottom:5px;">
.........
</td>
</tr>
<tr>
<td align="center" valign="middle" style="padding:1%; padding-top:10px; padding-bottom:5px;"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="max-width: 50%"></img></td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</html>
You can try display:inline-block for every column in your table. It will make the columns shift below each column when width of the screen decreases and make tr text-align: center;
I am facing alignment issue in outlook. I am sending following HTML code in mail.
<strong>Test Summury</strong><br>
<table border=0>
<tr style='width:100%;display:block'>
<td valign="middle" style='white-space:nowrap;width:100%;display:block;font-family:sans-serif;font-size:100%;color:#494961;padding:0px 2px;line-height:23px;letter-spacing:0.027em;word-spacing:0;width:100%'>
<img src='https://ci5.googleusercontent.com/proxy/8S3emk_N9__9dGjV9Sj9qnYVQWLj6dp4ukTDwGoDq3esYAjOleQ_g8PNqrI8-a_FCVltErovcE0AhZwr6L-I_lutmAu8RgE3oi38y-8=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/Duration.png' style='display:inline;margin:5px 0 0 0'>
<p style='display:inline-block;width:15%;margin-left:5px'><b>2 min</b><br>Duration</p>
<img src='https://ci6.googleusercontent.com/proxy/J9_xwl9q8wAIQw7DMq1CkOAKmMhDK9padlPL1jlpzwruQ9lquwQs-sl9g0gfSUdSo0UHny5IQC0VaqxliEL3QZHgdaT1mt4mkAA=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/users.png' style='display:inline;margin:10px 0 0 0'>
<p style='width:13%;margin-left:11px;display:inline-block'><b>12 vu</b><br>Max Users</p>
<img src='https://ci5.googleusercontent.com/proxy/G05_y_qOOgjUTuvc3Jnllh_DnglVGpp86Sp9BhTi0cCV7-BJUjht8APtujeMwTL-pMEh7WQkH_PyY1L5UyTtxaFWyWasJiUfBQ=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/Hits.png' style='display:inline;margin:10px 0 5px 20px'>
<p style='width:20%;margin-left:11px;display:inline-block'><b>13 Hits/s</b><br>Avg Throughput</p>
<img src='https://ci5.googleusercontent.com/proxy/uzImvaoO6Qkxx3A9uC7cV6rZ6qndIo6LRux-l2MylOkfvLU1VflPp_wNdQFdhjDTsZb2cGCfOSe9pXaMbasIq2nS6lS9BrM_3f7b=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/Errors.png' style='display:inline;margin:5px 0 5px 20px'>
<p style='width:11%;display:inline-block;margin-left:11px'><b>100%</b><br>Error</p>
</td></tr></table>
In gmail, it is aligned as I needed,
however in outlook email it gets distorted.
As the other guy said you code needs a lot of work. Below is what i did with your code. I placed your images and paragraph tags into a table sitting side a div. You will notice outlook conditional statements, these will be ready by outlook only.
This method of coding is called ghost columns and is part of hybrid coding.
<table width="100%" border=0 cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle">
<div style="width:24%; vertical-align:top; display:inline-block;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><img src='https://ci5.googleusercontent.com/proxy/8S3emk_N9__9dGjV9Sj9qnYVQWLj6dp4ukTDwGoDq3esYAjOleQ_g8PNqrI8-a_FCVltErovcE0AhZwr6L-I_lutmAu8RgE3oi38y-8=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/Duration.png' style='display:inline;margin:5px 0 0 0'></td>
</tr>
<tr>
<td align="center" valign="top" style='font-family:sans-serif;font-size:100%;color:#494961;padding:0px 2px;line-height:23px;letter-spacing:0.027em;word-spacing:0;'><b>2 min</b><br>Duration</p></td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</td>
<td width="25%">
<![endif]-->
<div style="width:24%; vertical-align:top; display:inline-block;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><img src='https://ci6.googleusercontent.com/proxy/J9_xwl9q8wAIQw7DMq1CkOAKmMhDK9padlPL1jlpzwruQ9lquwQs-sl9g0gfSUdSo0UHny5IQC0VaqxliEL3QZHgdaT1mt4mkAA=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/users.png' style='display:inline;margin:10px 0 0 0'> </td>
</tr>
<tr>
<td align="center" valign="top" style='font-family:sans-serif;font-size:100%;color:#494961;padding:0px 2px;line-height:23px;letter-spacing:0.027em;word-spacing:0;'><b>12 vu</b><br>Max Users</p></td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</td>
<td width="25%">
<![endif]-->
<div style="width:24%; vertical-align:top; display:inline-block;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><img src='https://ci5.googleusercontent.com/proxy/G05_y_qOOgjUTuvc3Jnllh_DnglVGpp86Sp9BhTi0cCV7-BJUjht8APtujeMwTL-pMEh7WQkH_PyY1L5UyTtxaFWyWasJiUfBQ=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/Hits.png' style='display:inline;margin:10px 0 5px 20px'> </td>
</tr>
<tr>
<td align="center" valign="top" style='font-family:sans-serif;font-size:100%;color:#494961;padding:0px 2px;line-height:23px;letter-spacing:0.027em;word-spacing:0;'><b>13 Hits/s</b><br>Avg Throughput</p></td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</td>
<td width="25%">
<![endif]-->
<div style="width:24%; vertical-align:top; display:inline-block;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><img src='https://ci5.googleusercontent.com/proxy/uzImvaoO6Qkxx3A9uC7cV6rZ6qndIo6LRux-l2MylOkfvLU1VflPp_wNdQFdhjDTsZb2cGCfOSe9pXaMbasIq2nS6lS9BrM_3f7b=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/Errors.png' style='display:inline;margin:5px 0 5px 20px'> </td>
</tr>
<tr>
<td align="center" valign="top" style='font-family:sans-serif;font-size:100%;color:#494961;padding:0px 2px;line-height:23px;letter-spacing:0.027em;word-spacing:0;'><b>100%</b><br>Error</p></td>
</tr>
</table>
</div>
</td></tr></table>
Let me know if this is the answer you were after.
I'm still pretty new to coding in general. I'm working off of a template that my predecessor made for this email, and it's rendering correctly in all email clients on Macs, but on Windows machines, Outlook 10 and Outlook 13 make the email margins shift to the left, and the body content extend incorrectly. I've identified where the problem is, and it's in the body of the email after the headline (the headline and footers are formatted properly, but the body is not.)
<div class="headline" style="max-width:650px;">
<!--[if (gte mso 9)|(IE)]>
<table width="650px" border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0;">
<tr>
<td style="padding:0;" >
<![endif]-->
<!--[if (gte mso 14)|(IE)]>
<table width="650px" border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0;">
<tr>
<td style="padding:0;" >
<![endif]-->
<!--[if (gte mso 15)|(IE)]>
<table width="650px" border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0;">
<tr>
<td style="padding:0;" >
<![endif]-->
<table border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0; Margin:0 auto; width:100%; max-width:650px; background-color: #ffffff;">
<tr>
<td align="left" style="width: 100%; font-size:0;">
<!--[if (gte mso 9)|(IE)]>
<table border="0" cellspacing="0" cellpadding="0" width="100%" style="border-spacing:0;">
<tr>
<td width="5%"> </td>
<td width="90%" valign="top">
<![endif]-->
<!--[if (gte mso 14)|(IE)]>
<table border="0" cellspacing="0" cellpadding="0" width="650px" style="border-spacing:0;">
<tr>
<td width="5%"> </td>
<td width="90%" valign="top">
<![endif]-->
<!--[if (gte mso 15)|(IE)]>
<table border="0" cellspacing="0" cellpadding="0" width="650px" style="border-spacing:0;">
<tr>
<td width="5%"> </td>
<td width="90%" valign="top">
<![endif]-->
Update
Now my code reads:
<!--[if (gte mso 9)|(IE)]>
<table border="0" cellspacing="0" cellpadding="0" width="100% "style="border-spacing:0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-spacing:0;" >
<td width="5%"> </td>
<td width="90%" valign="top">
<![endif]-->
<!--[if (gte mso 14)|(IE)]>
<table border="0" cellspacing="0" cellpadding="0" align="center" width="100%" class="contents" style="border-spacing:0;">
<tr>
<td class="inner">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-spacing:0; Margin:0 auto;">
<tr>
<td width="5%"> </td>
<td width="100%" valign="top">
<![endif]-->
<!--[if (gte mso 15)|(IE)]>
<table border="0" cellspacing="0" cellpadding="0" width="100%" style="border-spacing:0;">
<tr>
<td class="inner">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="contents" style="border-spacing:0;">
<tr>
<td width="5%"> </td>
<td width="100%" valign="top">
<![endif]-->
And it's better, but there are still an issue with too much margin on the right, and it's more pronounced in Outlook 2013: