After 3 days of building newsletters for customers I encountered a problem. I've made a section with one image on the left and some text on the right. This is what it looks like
And this is the code:
<div class="column narrow" style="text-align: left; color:
#430861; font-size: 16px; line-height: 24px; font-family: Open
Sans,sans-serif; Float: left; max-width: 320px; min-width: 200px; width:
320px; width: calc(72200px - 12000%)">
<div style="font-size: 12px; font-style: normal; font-weight:
normal" align="center">
<img class="gnd-corner-image gnd-corner-image-center
gnd-corner-image-top gnd-corner-image-bottom" style="border: 0; display:
block; height: auto; width: 100%; max-width: 397px" width="200"
src="http://i1.cmail20.com/ei/j/66/2D8/3C7/174211/temp_import/csfinal/AfbeeldingenVCCmailing-05.jpg">
</div>
</div>
<div class="column wide" style="text-align: left; color:
#430861; font-size: 16px; line-height: 24px; font-family: Open
Sans,sans-serif; Float: left; max-width: 400px; min-width: 320px; width:
320px; width: calc(8000% - 47600px)">
<div style="Margin-left: 20px; Margin-right: 20px;
Margin-top: 12px">
<div style="line-height: 4px; font-size: 1px"> </div>
</div>
<div style="Margin-left: 20px; Margin-right: 20px;
Margin-bottom: 12px">
<h2 class="size-16" style="Margin-top: 0; Margin-bottom: 0;
font-style: normal; font-weight: normal; color: #430861; font-size:
16px; line-height: 24px" lang="x-size-16"><span style="color:
#ffffff"><strong>WE ARE ARRIVING SOON!</strong><br>
Lashing + Securing will be fully available in<br>
Q4 2017</span></h2>
</div>
</div>
</div>
It looks good on every mobile phone, except on the Nexus 5 and it's terrible on Outlook (All versions, desktop and web)
Does anyone know how to fix this for Outlook and for the Nexus 5?
Some more information:
I'd greatly appreciate your help.
First, for newsletter, use <table>, <tr> and <td>, if you won't do that, you're going to have many issues, on many devices / webmail etc. Indeed, most of the emailing must be 600px, you will avoid some issues too using that width.
Second, don't use class, prefer pure inline CSS like : style="font-size:16px;"
Third, In my opinion, you should check Litmus and EmailOnAcid websites and forums (and Stackoverflow of course), and maybe you should try the EmailOnAcid mail tester tools. I got it in my company, it's really useful !
Finally, here is a (very short) example of a code you can use, it's a part of a template I use : https://jsfiddle.net/6tq8ufdr/
<table bgcolor="#fff" width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;">
<tbody>
<tr>
<td align="center" bgcolor="#ebf9ff">
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr bgcolor="#ffffff">
<td height="200" width="600">
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td height="200" width="200" valign="middle" align="center" style="height:200px;">
<img style="display:block;" src="http://del.h-cdn.co/assets/cm/15/10/54f682bbc4bc5_-_cooked-bacon-de-cp.jpg" alt="bacon"/>
</td>
<td height="200" width="15"></td> // because margin and padding won't work properly on many webmail (Outlook too)
<td height="200" width="370" valign="middle" align="left" style="height:200px;"> <p>Ut sagittis nulla at arcu pretium maximus. Morbi ut turpis tincidunt, scelerisque massa eget, rutrum lectus. Aenean sed ullamcorper leo. Quisque lacus dolor, tristique id mollis pellentesque, tempus ut augue. Cras mauris ipsum, molestie sit amet eros vel, tempus rutrum odio. Pellentesque consectetur quam non nisl vulputate euismod. Integer quis magna nec urna malesuada efficitur.</p>
</td>
<td height="200" width="15"></td> // because margin and padding won't work properly on many webmail (Outlook too)
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Don't forget the <head> etc.