Sendgrid add extra HTML and CSS above my template code

user_571723 0
Viewed 1307

I am working on creating a dynamic template with a very simple table and some text in Sendgrid. This email will be sent out to internal employees viewing almost entirely on desktops in Outlook, so I'm not too worried about consistency or compatibility. In all my test emails, the body was centered instead of all the way to the left. I viewed the source and played around with it until I finally realized there was a table above my content that had a styling of max-width:600px; which was causing it to be smaller and centered. Once I removed that styling it pushed my body all the way to the left like I wanted.

So what I am wanting to figure out is how to remove all that garbage HTML and CSS that Sendgrid adds to the source. Or at least remove that max-width of 600px.

Here is some of the example code that gets automatically added to all the emails that get sent out:

<body>
      <center class="wrapper" data-link-color="#1188E6" data-body-style="font-size:14px; font-family:arial,helvetica,sans-serif; color:#000000; background-color:#FFFFFF;">
        <div class="webkit">
          <table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper" bgcolor="#FFFFFF">
            <tr>
              <td valign="top" bgcolor="#FFFFFF" width="100%">
                <table width="100%" role="content-container" class="outer" align="center" cellpadding="0" cellspacing="0" border="0">
                  <tr>
                    <td width="100%">
                      <table width="100%" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                          <td>
                            <!--[if mso]>
    <center>
    <table><tr><td width="600">
  <![endif]-->
                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:600px;" align="center">

I really don't understand why the email needs to have at least 4 nested tables! That last table tag is where the max-width is located.

No other settings that I am aware of. Here is a screenshot of my code in the editor: enter image description here

Adding a visual representation as to what is going on to better help. enter image description here

The body of the email is centered and I just want it left justified.

sendgrid css html
1 Answers

I have build newsletters in the past using SendGrid with ROR and I found that the code gets converted to inline so it can be read in many other email providers, we found out this product called amp that will actually let us use non-inline style css.

I would suggest taking that approach, or coding inline style the max-with:600px; to the width prefered and run multiple tests on the different providers, Gmail, outlook, Ios, etc.

as you mentioned the newsletter creator will not send the code needed to send the newsletter but the content converted to inline.

amp link

demonstration

    <html ⚡4email data-editor-version="2" class="sg-campaigns" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <!--[if (gte mso 9)|(IE)]>
    <xml>
        <o:OfficeDocumentSettings>
            <o:AllowPNG/>
            <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Mexdev - Newsletter service</title>

    <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>


<body style="background-color:#F5F5F5; overflow: auto;">
<div>
        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout:fixed; background-color:#F5F5F5;" id="bodyTable">
            <tbody><tr>
                <td align="center" valign="top" id="bodyCell">
                <!--[if (gte mso 9)|(IE)]><table align="center" border="0" cellspacing="0" cellpadding="0" style="width:620px;" width="620"><tr><td align="center" valign="top"><![endif]-->
                <table border="0" cellpadding="0" cellspacing="0" style="max-width:480px;" width="100%" class="wrapperTable">
                <tbody>
                    <tr>
                        <td align="center" valign="top" class="wrapperCell">
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="wrapperPreHeader">
                                <tbody>
                                <tr>
                                    <td align="center" valign="top" style="padding-left:10px;padding-right:10px;">
                                    <!-- Email PreHeader Open //-->
                                    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="emailPreHeader">
                                        <tbody><tr>
                                            <td align="right" valign="top" style="padding: 20px;">
                                            </td>
                                        </tr>
                                    </tbody></table>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="wrapperHeader">
                                <tbody>
                                <tr>
                                    <td align="center" valign="top" >

    <!-- Email der Open //-->
                                    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="emailHeader" style="border-radius: 10px; background: white; margin-bottom: 20px;">
                                        <tbody>
                                            <tr>
                                                <td align="center" valign="middle" style="padding: 40px 20px 20px;" class="emailLogo">
                                                <!-- Logo and Link  // -->
                                                <a href="#" target="_blank" style="text-decoration:none;">
                                                    <img src="https://firebasestorage.googleapis.com/v0/b/mexdev-40fff.appspot.com/o/logos%2Ffavicon%20-%20Copy.png?alt=media&token=83158426-51b5-40c2-9423-9756710c79f0" alt="" width="80" >
                                                </a><br>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center" valign="middle" style="padding-bottom: 5px; padding-left: 20px; padding-right: 20px;" class="emailTitle">
                                                <!-- Email Header Title  // -->
                                                <p class="bigText" style="color:#A5A5A5; font-family: 'Poppins'; font-size:30px; font-weight:400; font-style:normal; letter-spacing:normal; line-height:32px; text-transform:none; text-align:center; padding:0; margin:0;">
                                                Mexdev - Newsletter service
                                                </p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center" valign="middle" style="padding-bottom: 40px; padding-left: 20px; padding-right: 20px;" class="emailTimeStamp">

    <!-- Cool Bar -->         <div style="height: 1.5px; margin-top: 20px; margin-right: 20px; margin-left: 20px; border-radius: 3px; background-image: linear-gradient(200deg, #00a8ff 10%, #7460c5 39%, #02d0ff 80%);"></div>
                          <br><br><br>
                                            <!-- Email Time Stamp  // -->
                                                <p class="smlText" style=" color:#999999; font-family: 'Poppins'; font-size:11px; font-weight:400; line-height:20px; font-style:normal; letter-spacing:normal; text-transform:none; text-align:center; margin:0; padding:0;">
                                                
</td>
</tr>
</tbody>
</table>
</td>
</tbody>
</table>


</div>

</body>
</html>

just sharing my experience, I hope it helps you style as planned.

Admin1
Related