Need help fixing responsive email footer width

[kineticcreative123]

Hi all,

I have an email template in which I revised and added my custom footer to. It works correctly but is in the wrong container and can't figure where to put it. It's running the width of the window instead of the email (740px) and I'm not sure where to place the table.

Thanks for any help. Here is a link to the html file. It was rendering weird when I pasted here.

Dropbox - index.html

[osgood_ · Accepted solution]

Why dont you move the whole of the code <!-- footer --> <!-- end footer --> to after <!-- ======= test ======= --> at the foot of the code.

Then delete width="100%" and add:

class="flexible" width="740" style="margin:0 auto;"

So the footers opening table tag looks like below:

<table class="flexible" width="740" style="margin:0 auto;" border="0" cellpadding="0" cellspacing="0" bgcolor="#666666" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">

[kineticcreative123]

You are awesome. I figured it was placement of the table and setting the width somewhere to 740. I thought I tried to change that but must have been placing my table in the wrong spot.

Thanks again!!!

[kineticcreative123]

Hey osgood!

I'm having an issue with the footer positioning. I've attached a link to the screen recording. It's fine in a browser just not an email.

Dropbox - email.mov

[osgood_]

kineticcreative123  wrote

Hey osgood!

I'm having an issue with the footer positioning. I've attached a link to the screen recording. It's fine in a browser just not an email.

Dropbox - email.mov

Are you sure you have included style="margin:0 auto;" on the footer table?

[kineticcreative123]

Yes I did. Here is the footer code and html file link.

Dropbox - index.html

<!--  footer  -->

<table class="flexible" width="740" style="margin:0 auto;" border="0" cellpadding="0" cellspacing="0" bgcolor="#666666" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">

    <tr>

      <td>

        <!--  footer top block  -->

        <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0px;" class="content_width">

          <!--  spacing  -->

          <tr>

            <td width="100%" height="40"> </td>

          </tr>

          <!--  end spacing  -->

          <!--  content  -->

          <tr>

            <td>

              <!--  footer logo  -->

              <table height="40" width="30" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full_width">

                <tr>

                  <td> </td>

                </tr>

              </table>

              <table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full_width center_txt">

                <tr>

                  <td>

                  <img src="http://offers.premierinc.com/rs/381-NBB-525/images/logo_1.png" width="170" height="36" alt="" title="" border="0" style="border:0; display:inline_block;">

                  </td>

                </tr>

              </table>

              <!--  end logo  -->

              <!--  spacing  -->

              <!--  end spacing  -->

              <!--  footer links  -->

              <table align="right" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;margin-top:10px;width: 250px;" class="full_width center_txt">

                <tr>

                  <td><a href="https://twitter.com/premierha/status/879806051176120320" target="_blank"><img src="http://offers.premierinc.com/rs/381-NBB-525/images/twiterr_icon.png" width="30" height="30" alt="" title="" border="0" style="border:0; display:inline_block;margin-right: -3px;"/></a>    <a href="https://www.linkedin.com/company/premier-inc" target="_blank"><img src="http://offers.premierinc.com/rs/381-NBB-525/images/linkedin_icon.png" width="30" height="30" alt="" title="" border="0" style="border:0; display:inline_block;"/></a>  <a href="https://www.instagram.com/premierha/?hl=en" target="_blank" ><img src="http://offers.premierinc.com/rs/381-NBB-525/images/insta_icon.png" width="30" height="30" alt="" title="" border="0" style="border:0; display:inline_block;"/></a>  <a href="https://www.youtube.com/user/premieralliance" target="_blank" ><img src="http://offers.premierinc.com/rs/381-NBB-525/images/youtube_icon.png" width="30" height="30" alt="" title="" border="0" style="border:0; display:inline_block;"/></a>  <a href="https://www.facebook.com/premierhealthcarealliance/" target="_blank" ><img src="http://offers.premierinc.com/rs/381-NBB-525/images/fb_icon.png" width="30" height="30" alt="" title="" border="0" style="border:0; display:inline_block;"/></a></td>

                </tr>

              </table>              <!--  end footer links  -->

            </td>

          </tr>

          <!--  content  -->

          <!--  spacing  -->

          <tr>

  <td width="100%" height="40"><center style="color:#ffffff;font-family: Arial, Helvetica, sans-serif;margin:15px;font-size: 14px;font-weight: 400;">Premier Inc. 13034 Ballantyne Corporate Pl, Charlotte, NC 28277 | <span style="text-decoration:underline;">Unsubscribe</span></center></style></td>

          </tr>

        </table>

     <!--  end footer  -->

[osgood_]

It could be as a result of the style tag being added twice to the table tag:

<table class="flexible" width="740" style="margin:0 auto;" border="0" cellpadding="0" cellspacing="0" bgcolor="#666666" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">

Move margin: 0 auto; to the 2nd style tag as below and delete the first style tag and see if that has any effect.

<table class="flexible" width="740" border="0" cellpadding="0" cellspacing="0" bgcolor="#666666" style="margin:0 auto; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">

Edited:

If that doesnt help I have another solution you can try.

[kineticcreative123]

Thanks. I moved it to the second tag as shown in screenshot and am getting same result.

[osgood_]

Right, try this. Remove your footer code (obviously keep a back-up). Create a table (see code below) where the footer table was before you remove it. Then paste the footer table code where the comment <!--    --> is, see below.

<table data-module="module-7"  class="main-table" width="100%" cellpadding="0" cellspacing="0">

<tr>

<td data-bgcolor="bg-module">

<!-- Paste footer table code here -->

</td>

</tr>

</table>

Then change the footer opening table tag to:

<table class="flexible" width="740" align="center" style="margin:0 auto;" cellpadding="0" cellspacing="0" bgColor="#666666">  

[kineticcreative123]

Nice!! thanks that worked!!! You are appreciated.

Kudos again...