Hello friends,
How do we widen the email template?
I’m not too sure how to explain it in words
But I would like something like this:
From this
To this
I would like this to happen on the emails themselves as customers have been giving feedback about the column being too small and they’d like it wider.
Please help. Thank you!!
Admin>PDF/Email templates> Advanced (caution)>Edit HTML of Email Wrapper
You should be able to widen it in there.
Hello,
Yup I have found it! But which line exactly refers to the wideness to the emails?
Thank you
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>
We also spent quite some time. Here is what we came up with that would also work great on any size screen.
Change this in Admin>PDF/Email templates> Advanced (caution)>Edit HTML of Email Wrapper as @anon54716677 stated.
You can also change the banner background color and your logo image (I took the link to our logo out).
<style>
body {
-webkit-text-size-adjust: none;
margin: 0;
padding: 0;
width: 100%;
color:#393c3d;
}
</style>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="-webkit-text-size-adjust: none;margin: 0;padding: 0;width: 100%;">
<center>
<table class="backgroundTable" border="0" cellspacing="0" cellpadding="0" style="margin: 0;padding: 0;background-color: #ffffff;height: 100%;width: 100%;"><!-- // Content Table Starts Here -->
<tr>
<td align="center" valign="top" bgcolor="#f8f8f8"><!-- // PageTop Wrapper Begin -- Insert Image Here -->
<span style="color: #E8E8E8; font-size: 10px;">----- REPLY ABOVE THIS LINE TO SEND A RESPONSE -----</span><br><br>
<div style="font-size:15px;"> </div>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
</td>
</tr>
</table>
<div style="font-size:10px;"> </div>
<!-- // PageTop Wrapper Ends -- Insert Image Here -->
<!-- // Content Wrapper Begin -- Change Background Color Here -->
<table border="0" cellspacing="0" cellpadding="1" class="tableWrapper" style="width:100%;max-width:960px">
<tr>
<td align="center" bgcolor="#dbdbdb"><table border="0" cellspacing="0" cellpadding="0" class="fullTable" style="width:100%;max-width:960px">
<tr>
<td align="center" bgcolor="#fefefe"><table width="90%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top" class="fullTable" style="width:100%;max-width:960px">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="medheight" style="line-height: 30px;"> </td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" class="innerTable2" style="width:100%;max-width:960px">
<tr>
<td align="center" valign="top" class="innertable">
<span class="body" style="color: #393c3d;font-family: Helvetica, Arial, sans-serif;font-size: 16px;line-height: 24px;">
<style>
/* Style the body */
body {
font-family: Arial;
margin: 0;
}
/* Header/Logo Title */
.header {
padding: 10px;
text-align: center;
background: #00B0F0;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<div class="header">
<img src="LINK TO YOUR ONLINE HOSTED IMAGE HERE" alt="Italian Trulli">
</div>
</body>
<p> </p>
{{email_body}}
</span></td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="smallheight" style="line-height: 10px;"> </td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
{{gray_social_links}}
</table>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="smallheight" style="line-height: 10px;"> </td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="smallheight" style="line-height: 10px;"> </td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="innertable">
<!-- // Footer Starts Here -->
<tr>
<td align="center" valign="top" class="footer" style="color: #959595;font-family: Helvetica, Arial, sans-serif;font-size: 13px;line-height: 16px;">
Sent with care from {{account_name}}<br>
<br>
{{account_address}}
</tr>
<!-- // Footer Ends Here -->
</table>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="smallheight" style="line-height: 10px;"> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<!-- // Content Wrapper End -- Change Background Color Here -->
<div style="font-size:15px;"> </div>
<div style="font-size:15px;"> </div></td>
</tr>
<!-- // Content Table Ends Here --></table>
</center><br>
</body>
Thank you! 
I will give this a try!
Thank you as well! I will also give this a try!
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.
Hi Sean,
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.
Aaron, the template I posted here in 2022 resizes nicely to the device is being read on.
Has anybody experienced issues with losing the grey background? I tried to edit the wrapper and reverted it by copy-pasting the default code but it was never the same. When I preview the code in any HTML viewer it renders as desired but in Syncro preview and in the actual emails it is missing the grey background. When I modify some parts of the wrapper, changes get through. But the background is always white I tried @j.mcbride code and it previews in a third-party HTML viewer nicely with a grey background around the body of the email but when I use it in our system the background again goes full white.
After altering the HTML wrapper with @garyh version… I did have to adjust the “Reply above this line” from with the original. Otherwise, we were getting full email replies entered into the ticket.
After that adjustment, our emails are tidy and working normally. Thanks all.