Search code examples
csshtml-email

remove spacing/padding between columns


Email newsletter looks good, other than they want the spacing between the columns to be gone so the left block touches the right block. I have the spacing to 0 but its still separate columns left to right. They want to keep the three rows separate but not the left to right. Any way to achieve this?

any spacing I've changed only affects the up and down between elements, not left and right.

td {
font-family: Lato, Arial, Helvetica, sans-serif !important;
}
#applecenter {
    margin:auto;
    max-width:690px;
}
table, td {
    border-collapse: collapse;
}
a {
    color:#0D47A1;
    text-decoration:none;
}
a:visited {
    text-decoration:none;
}
hr {
    display:none;
    visibility:hidden;
}
@media screen and (max-width: 693px) {
#background {
    padding:0 !important;
}
table, td {
    width:auto !important;
}
ul {
    margin:19px 0 19px 10px !important;
}
#hero img, #narrow, #preheader {
    width:95% !important;
}
#applecenter {
    padding:10px 0;
}
#col1 {
    float:left !important;
    padding:20px !important;
}
#col2 {
    float:left !important;
    padding:0 0 10px !important;
    text-align:center !important;
}
#col2 div {
    display:inline-block;
    padding:0 10px;
}
#col2 table {
    width:200px !important;
}
#cta {
    width:90% !important;
}
.goaway {
    display:none;
}
.stack {
    display:block;
}
.hero {
    margin: 10px 0 0;
}
}
     <!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

<!--<![endif]-->
<title>
Blueberry Template
</title>

<!--[if mso]>
<style>
#cta td {padding:20px;}
</style>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body style="background:#E0E0E0; margin:0; font-family:Lato, Arial, Helvetica, sans-serif; font-size:16px; color:#212121;mso-line-height-rule:exactly;">
    <table cellpadding="0" cellspacing="0" border="0" style="width:100%;">
    <tr>
    <td id="background" style="padding:20px; background:#E0E0E0;">
        <div id="applecenter">
            <table id="preheader" cellpadding="0" cellspacing="0" border="0" align="center" style="width:650px; margin:auto;">
            <tr>
                <td style="font-family:Arial, Helvetica, sans-serif; font-size:12px; padding-bottom:5px;">Use this area as a secondary subject line.</td>
            </tr>
            </table>
            <table cellpadding="0" cellspacing="0" border="0" align="center" style="width:690px; margin:auto;">
            <tr>
                <td id="hero" style="text-align:center; padding:0 0 10px;"><img style="width:650px; display:block; border:0; margin:auto;" src="http://emissourian.com/app/images/MedShoppe-Hero.jpg"></td>
            </tr>
            <tr>
                <td style="padding:0 10px 10px;"><table cellpadding="0" cellspacing="0" border="0" align="center" style="width:650px;">
                    <tr>
                        <td valign="middle" class="stack" style="padding:10px; background:#2196F3;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td valign="middle" style="line-height:125%; font-size:16px; font-family:Arial, Helvetica, sans-serif; color:#ffffff; padding:10px; text-align:center;"><h1 style="margin:0; font-size:24px; line-height:100%;">- The myth of Diabetes - <br>How to get the genie back in the bottle <br><br>With 1 in 3 being <br>diabetic or pre-diabetic <br> let’s turn diabetes around together! </h1>
                            <p style="margin:0; text-align:center;"><br>

                            </p>

            <a style="color:#ffffff;" href="tel:1-636-629-2022"><strong>Call To RSVP 636-629-2022</strong></a></td>
    </tr>
</table></td>
                        <td class="goaway" style="width:10px; text-align:center;">&nbsp;</td>
                        <td valign="top" class="stack hero" style="width:300px; text-align:center;  background:#BBDEFB; padding:10px; vertical-align:top;"><img src="http://emissourian.com/app/images/MedShoppe-Body1.jpeg" alt="" style="width:100%; display:inline; border:0;">
                            <p style="margin:5px 0;"></p></td>
                        </tr>
                    </table></td>


Solution

  • Remove this unused 5th last line

    <td class="goaway" style="width:10px; text-align:center;">&nbsp;</td>