I am trying to create an email that is properly visible in both the online version of outlook and gmail. I seem to have it working fine in gmail but have encountered a weird issue when it comes to outlook. I have two identical elements with an image inside. When I view the first one in outlook it strips the entire element of the inline style properties. It then works perfectly fine on the second with identical code. (see screenshot) I know there are weird inconsistencies between email clients but I am not sure what is going on here. If anyone has any ideas please let me know.
I looked around and the only person who seemed to have a similar problem to me was this question but I at least haven't found any stray semicolons like was the issue there.
<table>
<td align="left">
<div id="wrapper" style="width: 600px;background-image: linear-gradient(#15dbff, #6aff90);margin-top: 0px;position: absolute;top: 0px;">
<table height="20px" width="600px">
<tr height="20px" width="600px"></tr>
</table>
<div id="heading" style="width: 452px;height: 131px;background-color: white;margin: auto;margin-top: 20px;border-radius: 25px;">
<img id="headerimg" src="https://kevinuulong.com/images/KLlogocolredcircle.png" style="width: 131px; margin-left: 150px;">
</div>
<div id="body" style="width: 392px;background-color: white;margin: auto;margin-top: 20px;border-radius: 25px;padding: 30px;">
<p id="greeting">Mr. Somebody,</p>
<p id="mainbody">This is some sample text. It should be using the Montserrat font family. This is what a link should look like. Any images should be inside a div like this.
<div class="bodyimage" style="width: 392px;height: 200px;overflow: hidden;border-radius: 25px;margin-bottom: 10px;"><img src="https://source.unsplash.com/random/?colors/392x200"></div>
<div class="bodyimage" style="width: 392px;height: 200px;overflow: hidden;border-radius: 25px;margin-bottom: 10px;"><img src="https://source.unsplash.com/random/?colors/392x200"></div>
</p>
<p id="signature">Thanks,<br>Kevin Long</p>
</div>
<div id="contact" style="width: 452px;background-color: white;margin: auto;margin-top: 20px;margin-bottom: 20px;border-radius: 25px;">
<table>
<th style="width: 50%;"> <img id="contactimg" src="https://kevinuulong.com/images/KLlogocolredcircle.png" style="width: 120px;"></th>
<th style="width: 50%;">kevinuulong.com<br><br>
<a
id="btn" href="mailto:someone#example.com" style="text-decoration: none;background: #5284ff;background-repeat: repeat-x;background-size: 100% 2px;background-position: 0 95%;color: white;padding-left: 50px;padding-right: 50px;padding-top: 10px;padding-bottom: 10px;border-radius: 20px;">Contact Me</a>
</th>
</table>
</div>
<table height="20px" width="600px">
<tr height="20px" width="600px"></tr>
</table>
</div>
</td>
</table>
The basic requirements for Outlook are, for each image, to have the width and height attributes, i.e.:
<img width="392" height="200" src="https://source.unsplash.com/random/?colors/392x200">
Div's don't tend to play well with Outlook; that's why we're still using tables for layout.
If you need the image to be responsive, add this in the style:
<img width="392" height="200" style="width:100%;height:auto;max-width:392px" src="https://source.unsplash.com/random/?colors/392x200">
Related
Looking to allocate most of the row space to line up with the container to the right column of a row. I've used
Column1
Column2
This seems to resolve the issue on some online HTML editors, but for some reason, it has no effect on the internal editor I'm using which is mainly focused on MarkDown / HTML / In-Line CSS
Is there a way that this can be done preferably using in-Line CSS?
<div class="main-container" style="display: flex;">
<div class="image-container">
<img
src="https://lh3.googleusercontent.com/coMv1dl31PCfEs6essJoEUwVryaqKHKQvENdZ_WYpN-PXa8Qfitkg3grQxIVN22W5A"
hspace="50" width="150" height="150">
</div>
<div class="content-container" style="width: 600px;">
<h3>Subject Title</h3>
<h4>Subject Description</h4>
<table>
<tr>
<td>
<p>
<center><span style="font-weight:bold">Sample Service</span></center>
</p>
</td>
<td>Sample Service Details Will be listed here!!!!!!!!!!!</td>
</tr>
<tr>
<td>
<p>
<center><span style="font-weight:bold">Contact Us</span></center>
</p>
</td>
<td style="padding-left: 20px;">
<ul style="padding-left: 15px; margin: 0;">
<li style="padding-bottom: 10px;">
Email Sample
</li>
<li><a>Skype: Sample Contact</a></li>
</ul>
</td>
</tr>
</table>
</div>
</div>
Looking to have an image on the left side of a container, however, if the content is too short or too long I'd have to adjust the height of the image proportionally to prevent the content from sliding below the image. The reason I want to contain the Image and the content in the container is to ensure that the image is coherent throughout the entirety of the pages.
We can use HTML / in-line CSS / Markdown to make this adjustment. Perhaps I believe we may need to use Flexbox
I've attached the code below, I've used Grid and a table, and I don't really like it
<div style=“display:grid; grid-template-columns:auto 1fr”>
<div>
<h1> <img src=“https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg”
align=“left”
hspace=“30"
width=“100”
height=“100">
</div>
<div>
<h3>TITLE</h3>
Description for Title
<table>
<tr>
<td><strong>BLAH:</strong></td>
<td style=“padding-left:20px”><p>Updates are made annually or more frequently if needed<p/></td>
</tr>
<tr>
<td style=“vertical-align:top”><strong>Contact Us:</strong></td>
<td style=“padding-left:20px”>
<ul style=“padding-left: 15px; margin: 0px”>
<li style=“padding-bottom: 10px”><a href=“mailto:sample#email.com”>Email: Jane Doe</a></li>
<li><a>Skype: Sample</a></li>
</ul>
</br>
</td>
</tr>
</table>
</div>
</div>
--Most Recent
The image is on the left side but the table seems to overlap the image
This is what it currently looks like
edit 2
I've edited this again for you if this needs to be inline styles, i've gave a class name on the different containers so you can clearly see how this is working,
your image can just go into image-container and your content can go in content-container. You can add size to the containers, padding, margin etc.. to adjust the layout that you want, but this should help with the basic setup for your HTML.
<div class="main-container" style="display: flex;">
<div class="image-container">
<img
src=“https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg”
hspace="30" width="100" height="100">
</div>
<div class="content-container">
<h3>TITLE</h3>
<h4>Description for Title</h4>
<table>
<tr>
<td><strong>BLAH:</strong></td>
<td style="padding-left: 20px;">
<p>Updates are made annually or more frequently if needed</p>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><strong>Contact Us:</strong></td>
<td style="padding-left: 20px;">
<ul style="padding-left: 15px; margin: 0;">
<li style="padding-bottom: 10px;">
Email: Jane Doe
</li>
<li><a>Skype: Sample</a></li>
</ul>
</td>
</tr>
</table>
</div>
</div>
Here a flexbox example:
HTML
<div style="display: flex; flex-flow: row nowrap;">
<div style="flex: 1 auto;">
<img src=“https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg” hspace="30" width="100" height="100">
</div>
<div style="flex: 1 auto;">
<h3>TITLE</h3>
Description for Title
<table>
<tr>
<td><strong>BLAH:</strong></td>
<td style=“padding-left:20px”>
<p>Updates are made annually or more frequently if needed
<p />
</td>
</tr>
<tr>
<td style=“vertical-align:top”><strong>Contact Us:</strong></td>
<td style=“padding-left:20px”>
<ul style=“padding-left: 15px; margin: 0px”>
<li style=“padding-bottom: 10px”><a href=“mailto:sample#email.com”>Email: Jane Doe</a></li>
<li><a>Skype: Sample</a></li>
</ul>
</td>
</tr>
</table>
</div>
</div>
DEMO HERE
Having trouble figuring out how to write HTML code that will work on both mobile and desktop email clients. Right now its working well on desktop, but whenever I open it in mobile it renders oddly - see screenshot below.
I've got it into the Apple Mail signature and it looks perfect when I send it and open via desktop Apple or Gmail.
The main issue is that when it the email is opened on mobile, it has each of the columns (separated through tags) on a different line. When I flip my phone to horizontal, it automatically readjusts... Does this mean the float:left property isn't working on mobile? How would I adjust this? Do I need to specify width? Not sure
I've tried making the whole thing smaller which hasn't worked. I purposely chose to make it 600px width because I saw another signature that resized automatically to fit mobile that was 600px.
When I open in Google Chrome and use the toggle device, it reformats perfectly to fit on a mobile screen.
Thanks in advance for the help!
Example of what it looks like on mobile
Here's the code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Email Signature</title>
</head>
<body>
<div id="container">
<div class="column" style="float:left; margin:0px; font-size:0px;">
<img class="profile" src="http://hamptonyachts.com/uploads/Profile.png" alt="">
</div>
<div class="column" style="float:left; margin:0px; font-size:0px;">
<img class="name" src="http://hamptonyachts.com/uploads/HYG_Robert_Fiala.png" alt="" style="vertical-align:top">
<p class="contact" style="min-height: 60px; background-color: #06243f; font-family: Roboto; color: #FFFFFF; font-size: 15px; font-weight: 400; line-height: 18px; padding-left: 10px; padding-top: 10px; margin: 0px;">
MOBILE: 425.765.7850 <br> OFFICE: 206.623.5200 <br>
<span style=" font-size: 13px;">ROBERT#HAMPTONYACHTGROUP.COM</span></p>
</div>
<div class="column" style="float:left; margin:0px; font-size:0px;">
<div class="news">
<img class="news" src="http://hamptonyachts.com/uploads/Rendezvous.png" alt="">
</div>
<div class="social">
<img src="http://hamptonyachts.com/uploads/Facebook1.png" alt="" style="vertical-align:top">
<img src="http://hamptonyachts.com/uploads/Instagram1.png" alt="" style="vertical-align:top">
<img src="http://hamptonyachts.com/uploads/Web.png" alt="" style="vertical-align:top">
</div>
</div>
</div>
</body>
</html>
I don't suggest divs in email. They don't work with Outlook. Your divs were not configured in the correct manner, so they did not behave as you wanted. For instance, you didn't declare a width on any of your divs or images.
Your social media graphics don't line up in a table cell 226px wide, which is one of the reasons things were not lining up in your signature. I'm not spending time editing them for you, I just made them fit width-wise so that's why they will look wonky.
I tested this in Litmus and it works for Apple, IOS, Android, Gmail, Outlook and others. I turned the background of the table red to show what you still need to fix. You should fill in your ALT information as well.
Try this instead:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Email Signature</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#ff0000">
<tr valign="top">
<td rowspan="2" width="115">
<img class="profile" src="http://hamptonyachts.com/uploads/Profile.png" width="115" height="160" alt="Hampton">
</td>
<td width="259"><img class="name" src="http://hamptonyachts.com/uploads/HYG_Robert_Fiala.png" width="259" height="90" alt="" style="vertical-align:top">
</td>
<td width="226"><img src="http://hamptonyachts.com/uploads/Rendezvous.png" width="226" height="114" alt="">
</td>
</tr>
<tr valign="top">
<td style="font-size: 12px;">MOBILE: 425.765.7850 <br />
OFFICE: 206.623.5200 <br />
ROBERT#HAMPTONYACHTGROUP.COM</td>
<td><img src="http://hamptonyachts.com/uploads/Facebook1.png" width="90" height="46" alt="" style="display:inline-block;" />
<img src="http://hamptonyachts.com/uploads/Instagram1.png" width="43" height="46" alt="" style="display:inline-block;" />
<img src="http://hamptonyachts.com/uploads/Web.png" width="70" height="46" alt="" style="display:inline-block;" /></td>
</tr>
</table>
</body>
</html>
Good luck with the yacht sales.
I'm creating a responsive email... and tested it out on mail chimp and it was fine all throughout. but when tested on exact target (the email client needed to send out this email)
the image I need to center near bottom of email... WILL not center. see code:
<div class="layout one-col fixed-width" style=
"Margin: 0 auto;max-width: 600px;min-width: 320px; width: 320px;width: calc(28000% -167400px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
<div class="layout__inner" style=
"border-collapse: collapse;display: table;width: 100%;background-color: #f8f6f6;"
margin-left:="" emb-background-style="">
<!--[if (mso)|(IE)]><table align="center" cellpadding="0" cellspacing="0" role="presentation"><tr class="layout-fixed-width" emb-background-style><td style="width: 600px" class="w560"><![endif]-->
<div class="column" style=
"text-align: center; position: absolute !important; color: #8e8e8e;font-size: 14px;line-height: 21px;font-family: Cabin,Avenir,sans-serif;max-width: 600px;min-width: 320px; width: 320px;width: calc(28000% -167400px);">
<div style=
"Margin-left: 20px;Margin-right: 20px;Margin-bottom: 15px;font-size: 12px;font-style: normal;font-weight: normal;"
align="center">
<a href="url"
target="_blank"></a>
<center>
<img style=
"Margin-top: 10px; Margin-left: 20px;Margin-right: 20px;Margin-bottom: 15px;border: 0;display: block; text-align: center; position: absolute !important;height: auto;width: 100%;max-width: 257px;"
alt="Partnerships" src="image7_1112017.png" />
</center>
</div>
</div><!--[if (mso)|(IE)]></td></tr></table><![endif]-->
</div>
</div>
</body>
Everything else seems to be fine... but this is the only image that needs to be centered. fyi i got got the template from campaign monitor and modified accordingly. image was not centered in template.
Setting the width of a block-level element will stop it from filling the width of its container. Taking advantage of this you can set the margin to automatically split the remaining space evenly on the left and right side.
<div style="width: 200px; margin: auto;">
<img alt="Partnerships" src="image7_1112017.png" style="width: 100%;" />
</div>
Here we set the image container width to 200px and the image to 100% so it will scale to the width given. So even if an image is 500px wide, it will be centered and scaled down to 200px because that is the defined size of the container. If you know the width of your image, assign that to the container then setting the image element width becomes unnecessary.
EDIT
You may want to consider reformatting the body of your html. You will want to remove display:table; from the container with the layout__inner class.
<body>
<div class="layout one-col fixed-width" style="max-width: 600px;min-width: 320px;">
<div class="layout__inner" style="background-color: #f8f6f6;">
<!-- Content Body -->
<div style="margin-bottom:15px;">
Here is some example content. This is where you want your main content to be.
</div>
<!-- /Content Body -->
<div style="width:200px;margin:auto;">
<img alt="Partnerships" src="image7_1112017.png" style="width: 100%;" />
</div>
</div>
</div>
</body>
Here is a working example: JSFiddle
All you need is a one column one row table (maybe). You have a lot of divs in your code, way too many. And also a lot of CSS that won't work in an email. Keep the CSS simple, use tables to center things. Use a lot of nested tables rather than one table with many rows and columns. Try this in your DIV. It may work, but you may have to rework the rest of your code too.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center">
<img
alt="Partnerships" src="image7_1112017.png" style="margin-top: 10px; margin-left: 20px;margin-right: 20px;margin-bottom: 15px;border: 0;" /></td>
</tr>
</tbody>
</table>
Using this html code:
<div class="container-fluid" >
<div class="row">
<div class="col-md-3" >
<table id="Table" width="100%">
<tr>
<td align="left" valign="middle" >
<img src="MyImage" width="220" height="200">
</td>
</tr>
<tr>
<td width="251" height="400" align="left" valign="top" >
<p style="margin-top: 20px; margin-bottom: 0px;">
<img src="MyImage2" width="220" height="200">
</p>
</td>
</tr>
</table>
</div>
<div class="col-md-9 " >
<form id="form1" class="form-horizontal" runat="server" >
<div " align="left" >
Some other HTML stuff
</div>
</form>
</div>
</div>
</div>
It works fine, however, I need to add a left margin of 50px before MyImage2.
So I update my code this way.
<div class="container-fluid" >
<div class="row">
<div class="col-md-3" >
<table id="Table" width="100%">
<tr>
<td align="left" valign="middle" >
<img src="MyImage" width="220" height="200">
</td>
</tr>
<tr>
<td width="251" height="400" align="left" valign="top" style="margin-left: 50px;">
<!-----------------50 px margin added------------->
<p style="margin-top: 20px; margin-bottom: 0px;margin-left: 50px;">
<img src="MyImage2" width="220" height="200">
</p>
</td>
</tr>
</table>
</div>
<div class="col-md-9 " >
<form id="form1" class="form-horizontal" runat="server" >
<div " align="left" >
Some other HTML stuff
</div>
</form>
</div>
</div>
</div>
With this code I have a responsivity issue.
If I reduce the window size, the "other HTML stuff" displayed on the right frame overwrites the image2 of 50 pixels.
How can I have the right frame not to overwrite the right part of my image2?
I tried to increase the width of the td and / or table tage, it did not work for me. So hopefully someone can help me there.
EDIT:
you can check the issue on this link:
http://www.bootply.com/t1hF1cHuD2
reduce the window to have right frame to overwrite the left frame (which is what I want not to happen)
Try not to use inline styles as sometimes it can cause problems, I suggest making a section in the header and try putting margin-left:50px !important; and see if that works. Also you could use position:relative; and using top left right bottom properties to move it where you want.
The layout using columns with a width percentage (25%). So if you do not want to change the logic of the layout, the simplest solution is to add the same margin to the right content to always stay away from the image.
<div align="left" style="margin-left:50px;" >
Here the example. With the colors you can see what happens to your columns (and contents) in responsive: JS Fiddle link