How to widen the Email Template?

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!!

2 Likes

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;">&nbsp;</div>
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                </table>
                <div style="font-size:10px;">&nbsp;</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;">&nbsp;</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>&nbsp;</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;">&nbsp;</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;">&nbsp;</td>
                                        </tr>
                                    </table>
                                    <table border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td class="smallheight" style="line-height: 10px;">&nbsp;</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;">&nbsp;</td>
                                        </tr>
                                    </table></td>
                            </tr>
                        </table></td>
                    </tr>
                </table>
                <!-- // Content Wrapper End -- Change Background Color Here  -->
                <div style="font-size:15px;">&nbsp;</div>
                <div style="font-size:15px;">&nbsp;</div></td>
        </tr>
        <!-- // Content Table Ends Here  --></table>


</center><br>


</body>