We spent quite a bit of time tweaking this and testing it so it shows properly on both desktop clients and mobile devices. We had a lot of complaints about mobile devices being difficult to read and the text not formatting properly.
Make sure you save a copy of your HTML wrapper somewhere So you can tweak it and replace it as needed. The bottom has a place where we put a signature. You will need to update that or remove that.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<title></title>
<!--[if mso]>
<style>
table {border-collapse:collapse;border-spacing:0;border:none;margin:0;}
div, td {padding:0;}
div {margin:0 !important;}
</style>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style>
table, td, div, h1, p {
font-family: Arial, sans-serif;
}
@media screen and (max-width: 530px) {
.unsub {
display: block;
padding: 8px;
margin-top: 14px;
border-radius: 6px;
background-color: #555555;
text-decoration: none !important;
font-weight: bold;
}
}
</style>
</head>
<body style="margin:0;padding:0;word-spacing:normal;">
<span style="color: #B60300; font-size: 14px;">-- REPLY ABOVE THIS LINE ONLY --</span><br>
<div role="article" aria-roledescription="email" lang="en" style="text-size-adjust:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#ffffff;">
{{email_body}}
{{location_logo_100}}<br>
Sent with care from:<br>
Your Company<br>
Your Company Address<br>
Your Company Phone<br>
</div>
</body>
Don’t know if something has changed since this post, I’m new here!
…But we’re trying to sort out email templates, and using both of these as the wrapper, I’m seeing similar results to my attempts. There is a fixed width div and table added by syncro, which I can get around, but there’s no point as the viewport can’t be set meaning nothing is relative, so media queries aren’t working right and neither are relative sizes such as rem and em.
Arron, Are you editing the “advanced / HTML Email Wrapper” If you edit the source in the ticket comment template you will not be affecting the overall width of the emails.
Yes I’m editing the wrapper, but regardless of what you put in the wrapper, once you preview the email, all your code (including the wrapper) is ‘wrapped’ by a div and a table set to 850px. As far as I can see there is no way of turning this off.
But the biggest problem is if I try and set the viewport in my code, syncro strips this out, stopping any responsiveness.