3

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.

Improve this question
4
  • Are you using the SendGrid drag and drop editor or the code editor for your templates? Commented Aug 10, 2021 at 1:19
  • Using the code editor Commented Aug 11, 2021 at 3:45
  • Hmm, I find that the code editor only sends the code I provide, but when using the drag and drop editor, you don't control the markup. I just did a quick test with a code template where I just added an <h1> directly in the <body> and it was delivered like that. Are there any other settings you've added for this? Can you show a screenshot of how you are editing this template? Commented Aug 11, 2021 at 3:54
  • Hard to understand what you are trying to do without any visual clue. Using html+css in outlook desktop client is pretty tricky I would not care too much about the amount of html since wrapping tables is the only way to achieve certain layouts there. But if you need an specific layout we won't be able help only with html without a visual layout structure at least. Commented Aug 12, 2021 at 16:46

2 Answers 2

Reset to default
0

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

@philnash is right. You have to use sendgrid's code editor. Once you get access to the outside html you can left justify your content.

Improve this answer

1 Comment

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.