Search code examples
htmlcssmailchimpinline-styles

Coding mailchimp email inline styles not working as usual


so i have pretty easy coding running right now on the email we want to send out for the company consist of our logo a picture of the new company where we are a new agent in and the i don't have any Blurb yet for the company but it will still come

so whats happening is want to add a small background change to my emailer where our logo is in white and the rest of the body is in a dark grey but as soon as i create a div in my body it breaks where my picture and text appear

CODE

<html> 
  <header> 
    <img src="https://gallery.mailchimp.com/2e2d72a3d233cacb63ee93d53/_compresseds/03bb5db7-9357-47d4-b8ab-a6f0ae575554.jpg" style="max-width:80%;height:auto;padding-left:9%;"/> 
    <style>
      body {Color: ; background-color:white} div {background-color:#545454;padding-top:20px;padding-bottom:0.2px} 
    </style>
  </header>
  <body>
    <br>
    <h2 Style="Text-align:center;color:#A6ACAF;text-size:100%">We Are Now A</h2><h1 Style="text-align:center">LUK Agent <br><br> 
    <div> 
      <img src="https://gallery.mailchimp.com/2e2d72a3d233cacb63ee93d53/images/08ed7f7f-6417-4719-a3bc-3bf29a97bd1b.jpg" style="max-width:70%;height:auto;padding-left:0%;"/> <p Style="Text-align:Center;Border:5% solid #364C94;Align:Center;padding:5px;width:68.5%;margin-left:15%">Small Blurp of LUK</p>
    </div>

when running it in a w3schools it works perfectly if anyone can add this coding to their Mailchimp will see what i mean with it breaks the code and structure


Solution

  • Here are some guidelines:

    • Close all tags that are not self-closing (img tags are self-closing, but body, html and h1 are not).
    • Do not put an img tag in the header. It is not allowed there. Move it to the body.
    • Do not use empty CSS commands, like 'Color: ;'.
    • Do not make up your own CSS commands, like 'Align';
    • Write CSS commands and attributes in small letters (not sure this is mandatory, but it is very uncommon to capitalize them).
    • Use indentation for clarity (of the HTML structure).

    This would result in the following code:

    <html> 
      <header> 
        <style>
          body {color: black;background-color:white;} 
          div {background-color:#545454;padding-top:20px;padding-bottom:0.2px;} 
        </style>
      </header>
      <body>
        <img src="https://gallery.mailchimp.com/2e2d72a3d233cacb63ee93d53/_compresseds/03bb5db7-9357-47d4-b8ab-a6f0ae575554.jpg" style="max-width:80%;height:auto;padding-left:9%;" />
        <br>
        <h2 style="text-align:center;color:#A6ACAF;text-size:100%">We Are Now A</h2>
        <h1 style="text-align:center">LUK Agent</h1>
        <br>
        <br> 
        <div> 
          <img src="https://gallery.mailchimp.com/2e2d72a3d233cacb63ee93d53/images/08ed7f7f-6417-4719-a3bc-3bf29a97bd1b.jpg" style="max-width:70%;height:auto;padding-left:0%;" /> 
          <p style="text-align:center;border:5% solid #364C94;padding:5px;width:68.5%;margin-left:15%;">
            Small Blurp of LUK
          </p>
        </div>
      </body>
    </html>