Newsletter's footer is messed up in Gmail

HTML & CSS
,
1

I’m making a newsletter, looks okay in desktop but footer’s messed up in the mobile app of Gmail. It shows a different width. Have been trying to fix it for hours now, but no luck :confounded:

This is how it looks like in the Gmail mobile app.

720×1280 35 KB

Here is the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" 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">
    <!-- utf-8 works for most cases -->
    <meta name="viewport" content="width=device-width">
    <!-- Forcing initial-scale shouldn't be necessary -->
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <!-- Use the latest (edge) version of IE rendering engine -->
    <meta name="x-apple-disable-message-reformatting">
    <!-- Disable auto-scale in iOS 10 Mail entirely -->
    <title></title>
    <!-- The title tag shows in email notifications, like Android 4.4. -->
    <!-- Web Font / @font-face : BEGIN -->
    <!-- NOTE: If web fonts are not required, lines 10 - 27 can be safely removed. -->
    <!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
    <!--[if mso]>
    <style>
      * {
      font-family:sans-serif !important;
      }
    </style>
    <![endif]-->
    <!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
    <!--[if !mso]><!-->
    <!-- insert web font reference, eg: <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css"> -->
    <!--<![endif]-->
    <!-- Web Font / @font-face : END -->
    <!-- CSS Reset : BEGIN -->
    <!-- CSS Reset : END -->
    <!-- Progressive Enhancements : BEGIN -->
    <!-- Progressive Enhancements : END -->
    <!-- What it does: Makes background images in 72ppi Outlook render at correct size. -->
    <!--[if gte mso 9]>
    <xml>
      <o:OfficeDocumentSettings>
        <o:AllowPNG />
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
    
  <style type="text/css">
		html,body{
			margin:0 auto !important;
			padding:0 !important;
			height:100% !important;
			width:100% !important;
		}
		*{
			-ms-text-size-adjust:100%;
			-webkit-text-size-adjust:100%;
		}
		div[style*=margin: 16px 0]{
			margin:0 !important;
		}
		table,td{
			mso-table-lspace:0 !important;
			mso-table-rspace:0 !important;
		}
		table{
			border-spacing:0 !important;
			border-collapse:collapse !important;
			table-layout:fixed !important;
			margin:0 auto !important;
		}
		table table table{
			table-layout:auto;
		}
		img{
			-ms-interpolation-mode:bicubic;
		}
		[x-apple-data-detectors],.x-gmail-data-detectors,.x-gmail-data-detectors *,.aBn{
			border-bottom:0 !important;
			cursor:default !important;
			color:inherit !important;
			text-decoration:none !important;
			font-size:inherit !important;
			font-family:inherit !important;
			font-weight:inherit !important;
			line-height:inherit !important;
		}
		.a6S{
			display:none !important;
			opacity:.01 !important;
		}
		img.g-img+div{
			display:none !important;
		}
		.button-link{
			text-decoration:none !important;
		}
	@media only screen and (min-device-width: 375px) and (max-device-width: 413px){
		.email-container,.footer-container{
			min-width:375px !important;
		}

}		html,body{
			margin:0 auto !important;
			padding:0 !important;
			height:100% !important;
			width:100% !important;
		}
		*{
			-ms-text-size-adjust:100%;
			-webkit-text-size-adjust:100%;
		}
		div[style*=margin: 16px 0]{
			margin:0 !important;
		}
		table,td{
			mso-table-lspace:0 !important;
			mso-table-rspace:0 !important;
		}
		table{
			border-spacing:0 !important;
			border-collapse:collapse !important;
			table-layout:fixed !important;
			margin:0 auto !important;
		}
		table table table{
			table-layout:auto;
		}
		img{
			-ms-interpolation-mode:bicubic;
		}
		[x-apple-data-detectors],.x-gmail-data-detectors,.x-gmail-data-detectors *,.aBn{
			border-bottom:0 !important;
			cursor:default !important;
			color:inherit !important;
			text-decoration:none !important;
			font-size:inherit !important;
			font-family:inherit !important;
			font-weight:inherit !important;
			line-height:inherit !important;
		}
		.a6S{
			display:none !important;
			opacity:.01 !important;
		}
		img.g-img+div{
			display:none !important;
		}
		.button-link{
			text-decoration:none !important;
		}
	@media only screen and (min-device-width: 375px) and (max-device-width: 413px){
		.email-container,.footer-container{
			min-width:375px !important;
		}

}		.button-td,.button-a{
			transition:all 100ms ease-in;
		}
		.button-td:hover,.button-a:hover{
			background:#efad15 !important;
			border-color:#efad15 !important;
		}
		.button-td-white:hover,.button-a-white:hover{
			background:#efad15 !important;
			border-color:#efad15 !important;
			color:#FFFFFF !important;
		}
	@media screen and (max-width: 680px){
		.email-container,.footer-container{
			width:100% !important;
			margin:auto !important;
		}

}	@media screen and (max-width: 680px){
		.footer-container{
			table-layout:inherit !important;
		}

}	@media screen and (max-width: 680px){
		.fluid{
			max-width:100% !important;
			height:auto !important;
			margin-left:auto !important;
			margin-right:auto !important;
		}

}	@media screen and (max-width: 680px){
		.stack-column,.stack-column-center{
			display:block !important;
			width:100% !important;
			max-width:100% !important;
			direction:ltr !important;
			margin-bottom:20px !important;
			margin-left:auto !important;
			margin-right:auto !important;
		}

}	@media screen and (max-width: 680px){
		.center-on-narrow{
			text-align:center !important;
			display:block !important;
			margin-left:auto !important;
			margin-right:auto !important;
			float:none !important;
		}

}	@media screen and (max-width: 680px){
		table.center-on-narrow{
			display:inline-block !important;
		}

}	@media screen and (max-width: 680px){
		.align-center{
			text-align:center !important;
		}

}</style></head>
  <body width="100%" style="margin: 0; mso-line-height-rule: exactly;">
    <center style="text-align:left;width:100%;">
      <!-- Happy Birthday -->
      <table role="presentation" class="email-container" cellspacing="0" cellpadding="0" border="0" bgcolor="#13161a" width="680" align="center" style="background-color:#182548;background-image:url('https://gallery.mailchimp.com/aa2ad2a22cf7286453c7d6c94/images/8e857062-1acf-41db-b528-12214cb64909.jpg');background-size:cover;background-repeat:no-repeat;background-position:center;margin:auto;">
        <tr>
          <td height="10" style="font-size:1px;line-height:10px;"> </td>
        </tr>
        <tr>
          <td align="center">
            <img class="fluid" alt="Happy Birthday" src="https://gallery.mailchimp.com/aa2ad2a22cf7286453c7d6c94/images/ec397dc9-2263-4ab5-b3a1-c75f9ffa5a4b.png" style="display: block;">
          </td>
        </tr>
      </table>
      <!-- Newsletter Content : BEGIN -->
      <table role="presentation" class="email-container" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" width="680" align="center" style="background-color:#13161a;margin:auto;">
        <tr>
          <td>
            <table class="email-container" role="presentation" cellspacing="0" cellpadding="0" border="0" width="650" align="center" style="margin:auto;">
              <tr>
                <td height="25" style="font-size:1px;line-height:25px;"> </td>
              </tr>
              <tr>
                <td style="font-family:'Roboto-Regular', sans-serif;font-weight:400;font-size:34px;line-height:42px;color:#ffffff;text-align:center;padding:0 20px;">
                  <p style="margin:0;">text</p>
                </td>
              </tr>
              <tr>
                <td height="10" style="font-size:1px;line-height:10px;"> </td>
              </tr>
              <tr>
                <td style="font-family:'Roboto-Regular', sans-serif;font-weight:400;font-size:20px;line-height:26px;color:#ffffff;text-align:center;padding:0 20px;">
                  <p style="margin:0;">text</p>
                  <p style="margin:0;">text<img src="https://gallery.mailchimp.com/aa2ad2a22cf7286453c7d6c94/images/812035ef-e03b-45ae-8f94-b10ae8ddb65f.png" style="padding-left: 5px;" alt="smiley.png">
                  </p>
                </td>
              </tr>
              <tr>
                <td height="10" style="font-size:1px;line-height:10px;"> </td>
              </tr>
              <tr>
                <td style="font-family:'Roboto-Regular', sans-serif;font-weight:700;font-size:20px;line-height:26px;color:#ffffff;text-align:center;padding:0 20px;">
                  <p style="margin:0;">text</p>
                </td>
              </tr>
              <tr>
                <td height="20" style="font-size:1px;line-height:20px;"> </td>
              </tr>
              <tr>
                <td style="font-family:'Roboto-Regular', sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#ffffff;text-align:center;padding:0 20px;">
                  <p style="margin:0;">text</p>
                </td>
              </tr>
              <tr>
                <td style="font-family:'Roboto-Regular', sans-serif;font-weight:700;font-size:20px;line-height:26px;color:#ffffff;text-align:center;padding:0 20px;">
                  <p style="margin:0;">text</p>
                </td>
              </tr>
              <tr>
                <td style="font-family:'Roboto-Regular', sans-serif;font-weight:400;font-size:18px;line-height:24px;color:#ffffff;text-align:center;padding:0 20px;">
                  <a href="https://www.lanotdesign.com/" target="_blank" style="color:#ffffff;text-decoration:none;">text</a>
                </td>
              </tr>
              <tr>
                <td height="50" style="font-size:1px;line-height:50px;"> </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
      <!-- Newsletter Body : END -->
      <!-- EMAIL FOOTER : BEGIN -->
        <table role="presentation" class="email-container" cellspacing="0" cellpadding="0" border="0"  bgcolor="#0f1215" width="680" align="center" style="background-color: #0f1215; margin: auto;">
            <tr>
                <td align="center" valign="top">
                    <table role="presentation" class="footer-container" cellspacing="0" cellpadding="0" border="0" bgcolor="#0f1215" width="680" style="background-color: #0f1215; margin: auto;">
                        <tr>
                            <td height="30" style="font-size: 1px; line-height: 30px;">&nbsp;</td>
                        </tr>
                        <tr>
                            <td class="stack-column-center">
                                <table role="presentation" cellspacing="0" cellpadding="0" border="0">
                                    <tr>
                                        <td height="1" style="font-size: 1px; line-height: 1px;">&nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 0 7px;">
                                            <a href="text" target="_blank">
                                                <img alt="" style="display: block;" src="https://gallery.mailchimp.com/aa2ad2a22cf7286453c7d6c94/images/148556c4-0bfe-426a-8562-cf3e1781f9c4.png" />
                                            </a>
                                        </td>
                                        <td style="padding: 0 7px;">
                                            <a href="text" target="_blank">
                                                <img alt="" style="display: block;" src="https://gallery.mailchimp.com/aa2ad2a22cf7286453c7d6c94/images/529bae85-aa6a-4035-8cde-8714bd1f6d13.png" />
                                            </a>
                                        </td>
                                        <td style="padding: 0 7px;">
                                            <a href="text" target="_blank">
                                                <img alt="" style="display: block;" src="https://gallery.mailchimp.com/aa2ad2a22cf7286453c7d6c94/images/c2902d1d-e2df-4842-93dc-811d4159d79e.png" />
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="1" style="font-size: 1px; line-height: 1px;">&nbsp;</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td height="30" style="font-size: 1px; line-height: 30px;">&nbsp;</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <!-- EMAIL FOOTER : END -->
          </center>
        </body>
</html>

Would appreciate any help. Thank you!

2

I don’t have the gmail app so I can’t reproduce the problem.

Here’s what you might try though.

In your <table role="presentation" class="footer-container" remove the width attribute and then set width:100% in your existing inline styles.

Not sure it will work, but it’s worth a try :slight_smile:


 <!-- EMAIL FOOTER : BEGIN -->
        <table role="presentation" class="email-container" cellspacing="0" cellpadding="0" border="0"  bgcolor="#0f1215" width="680" align="center" style="background-color: #0f1215; margin: auto;">
            <tr>
                <td align="center" valign="top">
                    <table role="presentation" class="footer-container" cellspacing="0" cellpadding="0" border="0" bgcolor="#0f1215" style="width:100%; background-color: #0f1215; margin: auto;">

Scroll to the right and you will see where I moved it to the styles.

You may want to try it on the parent too…
<table role="presentation" class="email-container"

1 Like
3

Hi, Ray!

Thinking about it, your solution should work but it didn’t and I don’t understand why. :frowning:
But it’s fixed now. I merged the footer’s table with the newsletter’s body’s table.

Not my ideal solution but still, it’s working fine so it’s okay.
Thank you, Ray. Until my next question again. :sweat_smile:

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.