I have several tables and their content looks fine in JSFiddle, but on another website opened in the same browser everything - table, content - shifts to the right (screenshot). How can I force the content to look like it does in JSFiddle example above? Everything should be moved back to the left (see the arrows on the screenshot). Thank you!
Here is the original code:
<table style="height: 28px; width: 99.0328%; border-collapse: collapse; border-style: hidden;" border="0">
<tbody>
<tr style="height: 18px;">
<td style="width: 13.0819%; height: 18px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 14.0px; font-style: normal; line-height: 16px; font-weight: 400; display: inline;">Some text</span></td>
<td style="width: 63.7345%; height: 18px;"> </td>
</tr>
<tr>
<td style="width: 13.0819%;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 14.0px; font-style: normal; line-height: 16px; font-weight: 400; display: inline;"> </span></td>
<td style="width: 63.7345%;"> </td>
</tr>
<tr style="height: 18px;">
<td style="width: 13.0819%; height: 10px;"><img style="display: block; margin: 0px auto 30px auto;" src="https://content.linkedin.com/content/dam/me/business/en-us/amp/brand-site/v2/bg/LI-Bug.svg.original.svg" alt="" width="120" height="120" /></td>
<td style="width: 63.7345%; height: 10px;">
<table style="height: 46px; width: 32.4247%; border-collapse: collapse; border-style: hidden;" border="0">
<tbody>
<tr style="height: 18px;">
<td style="width: 100%; height: 10px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 18.0px; font-style: normal; line-height: 24px; font-weight: bold; color: #454545; display: inline;">TITLE</span></td>
</tr>
<tr style="height: 18px;">
<td style="width: 100%; height: 18px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 13.0px; font-style: normal; line-height: 17px; font-weight: 600; color: #f25e30; display: inline;">Description</span></td>
</tr>
</tbody>
</table>
<table style="height: 74px; width: 38.1632%; border-collapse: collapse; border-style: hidden;" border="0">
<tbody>
<tr style="height: 18px;">
<td style="width: 10.1%; height: 18px;"><img src="https://y5t6h9a6.stackpathcdn.com/39f70a22-cae2-45dd-b2a1-ae008217d0c3/img.png" alt="" width="16" height="16" /></td>
<td style="width: 690.907%; height: 18px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 14.0px; font-style: normal; line-height: 16px; font-weight: 400; color: #454545; display: inline;">phone number</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
If I understood the problem correctly, you want to shift the contents to the left in any situation. But first you should know the reason of this behavior. The reason is CSS relative units. In CSS you can define the unit of your width, height or any other property in two ways:
With relative units like % or vw or ...
With absolute units like px.
The second one is suitable for cases when you want that an element (here the table tag) has a fixed value (for example a fixed width) regardless of the browser (here browser width). When you put your code in jsfiddle, it shows the result in bottom-right part of the browser. So the width for showing the content is limited and because you defined your width relative (width: 99.0328%) to the width of parent element (here the body tag), you see that the elements are dense and space between them are low. If you see that code in a PC browser (that has more width) you get a different result (like the picture you posted). So one solution for that is to put all the table in a <section> tag and give an absolute width to that <section> tag like the code below:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<section style="width: 606px">
<table style="height: 28px; width: 99.0328%; border-collapse: collapse; border-style: hidden;" border="0">
<tbody>
<tr style="height: 18px;">
<td style="width: 13.0819%; height: 18px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 14.0px; font-style: normal; line-height: 16px; font-weight: 400; display: inline;">Some text</span></td>
<td style="width: 63.7345%; height: 18px;"> </td>
</tr>
<tr>
<td style="width: 13.0819%;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 14.0px; font-style: normal; line-height: 16px; font-weight: 400; display: inline;"> </span></td>
<td style="width: 63.7345%;"> </td>
</tr>
<tr style="height: 18px;">
<td style="width: 13.0819%; height: 10px;"><img style="display: block; margin: 0px auto 30px auto;" src="https://content.linkedin.com/content/dam/me/business/en-us/amp/brand-site/v2/bg/LI-Bug.svg.original.svg" alt="" width="120" height="120" /></td>
<td style="width: 63.7345%; height: 10px;">
<table style="height: 46px; width: 32.4247%; border-collapse: collapse; border-style: hidden;" border="0">
<tbody>
<tr style="height: 18px;">
<td style="width: 100%; height: 10px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 18.0px; font-style: normal; line-height: 24px; font-weight: bold; color: #454545; display: inline;">TITLE</span></td>
</tr>
<tr style="height: 18px;">
<td style="width: 100%; height: 18px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 13.0px; font-style: normal; line-height: 17px; font-weight: 600; color: #f25e30; display: inline;">Description</span></td>
</tr>
</tbody>
</table>
<table style="height: 74px; width: 38.1632%; border-collapse: collapse; border-style: hidden;" border="0">
<tbody>
<tr style="height: 18px;">
<td style="width: 10.1%; height: 18px;"><img src="https://y5t6h9a6.stackpathcdn.com/39f70a22-cae2-45dd-b2a1-ae008217d0c3/img.png" alt="" width="16" height="16" /></td>
<td style="width: 690.907%; height: 18px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 14.0px; font-style: normal; line-height: 16px; font-weight: 400; color: #454545; display: inline;">phone number</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</section>
</body>
</html>
If you want to learn more about CSS units I suggest to read more tutorials like this one.
Related
I'm creating an email signature using CodeTwo Email signature from Office 365. It's nearly done, but I keep having issues with a horizontal line that's in the signature. I've tried multiple variations of CSS style elements to get it to work everywhere, but as of now, it shows up on mobile devices, but not desktop devices (it shows up as like an outline of the line on desktop). For the longest time, it worked on desktop but not mobile, but then when I changed something it flipped. I'm using an hr element for the line. Here's a segment of the code:
<TABLE style="WIDTH: 350px" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD
style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px; COLOR: #213e64"
vAlign=top><STRONG>{First name} {Last name}</STRONG></TD></TR>
<TR>
<TD style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px"
vAlign=top>{Title}</TD></TR>
<TR>
<TD style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 400px" vAlign=top>
<HR
style="BORDER-TOP: 0px; HEIGHT: 3px; BORDER-RIGHT: 0px; WIDTH: 80%; BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; DISPLAY: inline-block; BACKGROUND-COLOR: #213e64"
align=left>
</TD></TR>
Does anyone know what combination of stylings I would need in my hr tag? Thanks
Instead of the <hr> try using a <div> with a border-bottom of the required size:
<div style="border-bottom: 3px solid #213e64;"></div>
Example
<table style="WIDTH: 350px" cellSpacing=0 cellPadding=0 border=0>
<tbody>
<tr>
<td style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px; COLOR: #213e64" vAlign=top>
<strong>{First name} {Last name}</strong>
</td>
</tr>
<tr>
<td style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px" vAlign=top>{Title}</td>
</tr>
<tr>
<td style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 400px" vAlign=top>
<div style="border-bottom: 3px solid #213e64;"></div>
</td>
</tr>
</tbody>
</table>
You forgot to close the HR tag and have some styles that are not needed, try this
<TABLE style="WIDTH: 350px" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD
style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px; COLOR: #213e64"
vAlign=top><STRONG>{First name} {Last name}</STRONG></TD></TR>
<TR>
<TD style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px"
vAlign=top>{Title}</TD></TR>
<TR>
<TD style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 400px" vAlign=top>
<HR
style="HEIGHT: 3px; WIDTH: 80%; DISPLAY: inline-block; BACKGROUND-COLOR: #213e64"
align=left />
</TD></TR>
</TBODY>
</TABLE>
html siganture keeps cutting off
I have 0 html experience but can edit code if its straightforward enough.
The top of my logo/social media icons keeps cutting off on outlook. They don't cut off when I open the email in a browser or through a mobile device. Is there a way to edit the code so that it doesn't cut off? I tried adding padding to the top but it doesn't work. Please help.
Code
<table width="335" cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;"> <tr> <td style="padding-top: 0; padding-bottom: 0; padding-left: 0px; padding-right: 0;"> <table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;"> <tr> <td colspan="2" style="padding-bottom: 2px; color: #515151; font-size: 15px; font-family: Arial, Helvetica, sans-serif;line-height:15px;"> <b>Ryan Milliman </b> </td> </tr> <tr> <td colspan="2" style="padding-bottom: 6px; color: #515151; font-size: 14px; font-family: Arial, Helvetica, sans-serif;line-height:15px;"> <b> <small style="color:#515151;" >Director of Investor Relations</small></b> </td> </tr> <tr> <td colspan="2" style="color: #333333; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:6px;line-height:0px;"> <img src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/border.png" width="333" height="3" alt="" /> </td> </tr> <tr> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:4px;line-height:15px;"> <b style="color:#9d1924;" >O:</b> (800) 735- 9973 </td> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:4px;line-height:15px;"> <b style="color:#9d1924;">M:</b> (760) 793- 2933 </td> </tr> <tr> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:4px;line-height:15px;"> <b style="color:#9d1924;" >W:</b> www.primior.com </td> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:4px;line-height:15px;"> <b style="color:#9d1924;">E:</b> ryan.milliman#primior.com </td> </tr> <tr> <td colspan="2" style="color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:6px;"> <b style="color:#9d1924;">A:</b> <img src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/border.png" width="333" height="3" alt="" /> </td> </tr> <tr> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:7px; padding-top:7px;line-height:15px;"> <a href="http://www.primior.com"> <img src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/logo.png" width="155" height="20" alt="" /> </td> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:7px;padding-top:7px;line-height:15px;text-align:right;"> <img width="20" height="20" style="border: none; width: 20px; max-width: 20px !important; height: 20px; max-height: 20px !important;vertical-align:middle;" src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/fb.png"> <img width="20" height="20" style="border: none; width: 20px; max-width: 20px !important; height: 20px; max-height: 20px !important;vertical-align:middle;" src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/tw.png"> <img width="20" height="20" style="border: none; width: 20px; max-width: 20px !important; height: 20px; max-height: 20px !important;vertical-align:middle;" src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/lin.png"> <img width="20" height="20" style="border: none; width: 20px; max-width: 20px !important; height: 20px; max-height: 20px !important;vertical-align:middle;" src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/ins.png"> </td> </tr> </table> </td> </tr> </table>
Outlook sometimes ignores the width/height of an element.
Try adding width and height to your td where the Image is located.
How can I have an image (little arrow on the right) set next to an anchor tag <a> and keep them both aligned vertically and horizontally. I've been trying this in multiple ways but came across errors with every method I tried. either the <a> tag wont work (not clickable) in html emails or the arrow would be outside the clickable area. I only need one of these following codes .Here's some what Iv'e tried:
First code: the problem here is: if the user clicked on the arrow it wont response, because it's not inside the <a> tag, but this is working
<table cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif; text-align: center;">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;text-align: center;">
<tr>
<td align="left" style="padding: 15px 0px 15px 30px; text-decoration: none; font-size: 11px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; vertical-align: top; line-height: normal !important;">
<a style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">Go to Link</a>
</td>
<td align="right" style="text-align: left; color: #FFFFFF; font-weight: 700;"><img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15"></td>
<td><img src="http://via.placeholder.com/5/007cb0" width="5" /></td>
</tr>
</table>
</td>
</tr>
</table>
Second code: I couldn't get the text vertical aligned within the <td>
<table cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif; text-align: center;">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;text-align: center;">
<tr>
<td height="50" align="left" style="text-decoration: none; font-size: 11px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; vertical-align: top; line-height: 100% !important;">
<a style="height:100%;font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer; display: block">Go to Link <img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="20" style="vertical-align: middle;"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Third code The problem here is: It didn't work in any email client and the link is not clickable.
<table class="mobile" cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif;">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;">
<tr>
<td>
<a style="border: 1px solid red; padding: 20px;display: block; font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">
<tr style="font-size: 16px; text-align: left; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">
<td align="left" style="text-decoration: none; font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; vertical-align: top; line-height: normal !important;">
GET VERSATILE
</td>
<td align="right" style="text-align: center; color: #FFFFFF; font-weight: 700;"><img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15" /></td>
</tr>
</table>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Summaries:
I need this <a> tag to have an arrow next to it and to be Clickable all around the blue area.
Thanks for the help.
This is working in most of email clients, and even if I changed the text inside the anchor tag.
hope that would help.
<table class="mobile" cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif;">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0;font-family: Arial, Helvetica, sans-serif;font-weight: bold;">
<tr>
<td class="links" style="padding: 10px; color: #ffffff; vertical-align: middle; text-align: center; font-family: Arial, Helvetica, sans-serif;font-weight: bold;"><a style="text-align: center; display: block;cursor: pointer;font-family: Arial, Helvetica, sans-serif; color: #ffffff !important; text-decoration: none; font-size: 16px; line-height: 20px; font-weight: bold;" pm-link="landingpage1" pm-link-default-url="global_landingpage">GO TO LINK<img src="http://via.placeholder.com/15/007cb0" width="15" alt="" /><img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="20" style="vertical-align: middle;padding: 0 0 4px 0;max-width: 20px" /></a></td>
</tr>
</table>
</td>
</tr>
</table>
Not sure if you have thought of this but it should be as easy as adding an a tag around the image for the first question.
Try this below and see if it works for you. I have just added your a tag from the sibling td just to give you an idea.
<table cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif; text-align: center;">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;text-align: center;">
<tr>
<td align="left" style="padding: 15px 0px 15px 30px; text-decoration: none; font-size: 11px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; vertical-align: top; line-height: normal !important;">
<a style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">Go to Link</a>
</td>
<td align="right" style="text-align: left; color: #FFFFFF; font-weight: 700;"><img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15"></td>
<td><a style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;"><img src="http://via.placeholder.com/5/007cb0" width="5" /></a></td>
</tr>
</table>
</td>
</tr>
</table>
Hope this answer works for you.
Edited
Now that I know you're making a button that aligns to the right, I have a better approach for you.
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="right">
<tr>
<td><!-- The button code -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="background: #007cb0; text-align: center;">
<a href="#" target="_blank" style="background: #007cb0;
border: 15px solid #007cb0; font-family: sans-serif; font-size: 16px;
line-height: 110%; text-align: center; text-decoration: none !important;
display: block; font-weight: 700;"><span style="color:#ffffff;"> Go to Link <img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15">
</span></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
This code will right-align and look presentable in every email client. It does not quite look perfect in Outlook. To do that, you need to add a spacer table specifically for Outlook.
I am deleting the older post and code, but honestly, it's the same thing I posted yesterday with added which gives you a reliable form of padding.
Could you tell why are you using table formatting for making button-styled links? Is that specific for html-email? This seems easier and after some customizing will give the same look:
a {
display: inline-block;
border: 1px solid black;
padding: 10px;
}
Link <span> ❯</span>
OK then just add/adjust margin and padding to make clickable area larger
a{
display: inline-block;
position: relative;
z-index: 1;
padding: 1em;
margin: -1em;
}
td img{
padding-bottom: 5px;
}
https://jsfiddle.net/33q09cy0/
and add the image inside the a tag reference.
<td align="left" style="padding: 15px 0px 15px 30px; text-decoration: none; font-size: 11px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; vertical-align: top; line-height: normal !important;">
<a style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">Go to Link</a>
<img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15">
</td>
I have made an email signature to be used for outlook, but when it is sent in the email, the format is changing. The spaces between each section increase. How do I code this to ensure that the format does not change?
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table class="container" style="margin:0;background:#fff;border-collapse:collapse;border-spacing:0;margin:0;padding:0;text-align:inherit;width:580px; box-style: borderbox; position: relative;">
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;">
<p style=" color: #00b3b3; font-family: 'Arial', sans-serif; font-size: 12pt; font-weight: bold; padding: 0;">Delia Bellaby</p>
</td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;"><img src="https://s19.postimg.org/95hmbn6ar/design_Make_Logo.jpg"></td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;"><p style="color: #00b3b3; font-family: 'Arial', sans-serif; font-size: 12pt; font-weight: bold">Architect</p></td>
</tr>
<tr>
<td><p style="color: #9C9E9E; font-family: 'Arial', sans-serif; font-size: 10pt; font-weight: bold; margin-top: 10px;">Mobile: 022 362 6916 </p></td>
</tr>
<tr>
<td><p style="text-align: left; color: #9C9E9E; font-family: 'Arial', sans-serif; font-size: 10pt; border-top: 2px solid #00b3b3; padding-top: 10px; "><strong style="color:#00b3b3;">website:</strong> http://www.designmake.co.nz<br><strong style="color:#00b3b3;">email:</strong> delia#designmake.co.nz</p></td>
</tr>
<tr>
<td>
<span style="text-align: left; color: #00b3b3; font-family: 'Arial', sans-serif; font-size: 10pt; ">
<img style="color: #3399ff; height: 30px; width: 30px;" src="https://s19.postimg.org/6begy7bub/Facebook-_Home-_Logo.png"></span>
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Social Superstore - Email template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
/* RESET STYLES */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body{height:100% !important; margin:0; padding:0; width:100% !important;}
#media screen and (max-width: 525px) {
table {
width: 100%;
}
.header-padding {
padding-left: 10px;
padding-right: 10px;
}
.logo {
height: 50px;
width: auto;
}
.mobile-hide {
display: none !important;
}
.mobile-copy {
text-align: center !important;
}
.mobile-center-btn {
text-align: center !important;
}
.icon-image-tall {
width: auto !important;
height: 200px;
}
.icon-image-long {
width: 200px;
height: auto !important;
}
.icons_three_padding {
padding-bottom: 40px;
}
.iphone_icon_mobile {
width: 120px !important;
}
.money_icon_mobile {
width: 120px !important;
}
.share_icon_mobile {
width: 120px !important;
}
.icons_conatiners_height {
height: auto !important;
}
.main-image-mobile {
width: 90% !important;
}
}
</style>
</head>
<body>
<!-- hidden preheader text -->
<div style="display: none; font-size: 1px; color: #f2f2f2; line-height: 1px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
Hi #FIRSTNAME#, You are officially a #[COMPANY]. It's time to become a social butterfly. You should be proud of your new store because it truly is super… now let's find all your friends so that they can become Social Superstars too.
</div>
<!-- /hidden preheader text -->
<!--container-->
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#f2f2f2" style="background-color: #f2f2f2;">
<tr>
<td>
<!--header container-->
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#ffffff" style="background-color: #ffffff; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #dadada;">
<tr>
<td style="padding-top: 10px; padding-bottom: 10px;" class="header-padding">
<!--header-->
<center>
<table cellspacing="0" cellpadding="0" border="0" width="600" bgcolor="#ffffff" style="background-color: #ffffff; margin-left: auto; margin-right: auto;">
<tr>
<td>
<img src="http://placehold.it/64x64" alt="" style="font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color: #E72C7B; font-size: 24px;" width="64" class="logo">
</td>
</table>
</center>
<!--/header-->
</td>
</tr>
</table>
<!--/header container-->
<!--hero container-->
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#ffffff" style="background-color: #ffffff;">
<tr>
<td style="padding-top: 40px; padding-bottom: 40px; padding-left: 10px; padding-right: 10px;">
<!--hero copy-->
<center>
<table cellspacing="0" cellpadding="0" border="0" width="600" style="margin-left: auto; margin-right: auto; text-align: center;">
<tr>
<td style="font-size: 36px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; font-weight: bold; padding-bottom: 20px; color: #6a6a6a;" class="mobile-copy">
Hi #FIRSTNAME#,
</td>
</tr>
<tr>
<td style="font-size: 18px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; line-height: 175%; color: #6a6a6a;" class="mobile-copy">
You are officially a <span style="font-weight: bold">#[COMPANY]</span>. It's time to become a social butterfly. You should be proud of your new store because it truly is super… now let's find all your friends so that they can become Superstars too.
</td>
</tr>
</table>
</center>
<!--/hero copy-->
</td>
</tr>
</table>
<!--/hero container-->
<!--fill it up and launch container-->
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#6a6a6a" style="background-color: #6a6a6a;">
<tr>
<td style="padding-top: 40px; padding-bottom: 40px; padding-left: 10px; padding-right: 10px;">
<!--fill it up and launch-->
<center>
<table cellspacing="0" cellpadding="0" border="0" width="600" style="margin-left: auto; margin-right: auto; text-align: center;" align="center">
<tr>
<td style="font-size: 48px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; font-weight: bold; padding-bottom: 20px; color: #ffffff; text-align: center;" class="mobile-copy">More followers,<br>more money</td>
</tr>
<tr>
<td style="padding-bottom: 40px;"><img src="https://s3-eu-west-1.amazonaws.com/socialsuperstore-assets/emails/find-followers.png" alt="" style="width: 360px;" width="360" class="main-image-mobile">
</td>
</tr>
<tr>
<td style="font-size: 18px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; line-height: 175%; padding-bottom: 40px; color: #ffffff; text-align: center;" class="mobile-copy">Don't be shy… share share share! <br>Remember... Stay Social. Stay Super. </td>
</tr>
<tr>
<td class="mobile-center-btn">Share now →</td>
</td>
</tr>
</table>
</center>
<!--/fill it up and launch-->
</td>
</tr>
</table>
<!--/fill it up and launch container-->
<!--footer container-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding-top: 40px; padding-bottom: 40px; padding-left: 10px; padding-right: 10px;">
<!--footer-->
<center>
<table width="600" cellpadding="0" cellspacing="0" align="center" style="text-align: center;">
<tr>
<td style="font-size: 18px; line-height: 175%; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color: #999999; padding-bottom: 20px">Thanks,<br />
The [COMPANY]team
</td>
</tr>
<tr>
<td style="font-size: 24px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color: #282828; font-weight: bold;">COPY GOES HERE</td>
</tr>
<tr>
<td style="padding-top: 20px;">
<img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0">
<img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0">
<img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0">
<img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0">
<img src="http://placehold.it/42x42png" alt="" height="42" width="42" border="0">
</td>
</tr>
</table>
</center>
<!--/footer-->
</td>
</tr>
</table>
<!--/footer container-->
<!-- Unsubscribe container -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#282828" align="center" style="padding: 20px 0px; background-color: #282828;">
<!-- unsubscribe -->
<center>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="responsive-table">
<tr>
<td align="center" style="font-size: 10px; line-height: 175%; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color:#ffffff;">
<span class="appleFooter" style="color:#999;">
[company]
</span>
<br><a class="original-only" style="color: #E72C7B; text-decoration: none;" href="http://$UNSUB$">Unsubscribe</a>
</td>
</tr>
</table>
</center>
<!--/unsubscribe-->
</td>
</tr>
</table>
<!--/Unsubscribe container-->
</td>
</tr>
</table>
<!--/container-->
</body>
</html>
I've created some responsive HTML emails and have noticed on a couple of them, they show a white space (approx 20-30px in width) on the right. it only appears on iPads? I've attached a screenshot. Any ideas on how to get rid of it? I've apply 100% widths and 0 padding/margin and overflow-x: hidden to body and html tags but didn't work. Is it something to do with the amount of content in the email? The other emails without this issue have a lot more content (ie. they are taller with more sections).
http://imgur.com/kBgYmLm
This one was a tough nut to crack. To fix it, I wrote a media query that targets only iPads, and specifies a minimum width for the body. In my testing, this fixes the issue.
https://www.emailonacid.com/app/acidtest/display/summary/H51ptRsq1CKfk3qClFhulAJfOoa7NeZ5uplotor0fc9kD/shared
#media screen and (device-width: 768px) and (device-height: 1024px) {
body {min-width: 701px}
}