Content not aligning in center

Question

this is my first time posting here. I'm having trouble with this email I am trying to develop. Everything looking fine until you expand full screen. When expanding full screen, some of the content ends up being next to each other. Please help. Thank you.

.footer {
  width: 600px;
  background-color: #262626;
  text-align: center;
  font-family: verdana;
  text-decoration: none;
}

@media only screen and (max-width: 480px) {
  img {
    max-width: 100% !important;
  }
  .footer {
    max-width: 100% !important;
  }
}

<center>
  <table>
    <tr>
      <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner"><img src="https://i.imgur.com/PDjptBG.jpg"></a>
    </tr>
    <tr>
      <img src="https://i.imgur.com/hQ742x0.jpg">
    </tr>
    <tr>
      <img src="https://i.imgur.com/Tp7E0YJ.jpg">
    </tr>
    <tr>
      <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner"><img src="https://i.imgur.com/jGkDOCo.jpg"></a>
    </tr>
    <tr>
      <a href="https://www.dollarshaveclub.com/our-products/clean/shampoo-and-conditioner-bundle"><img src="https://i.imgur.com/ZO8mC30.jpg"></a>
    </tr>
    <div class="footer">
      <img style="padding-top:20px;" src="https://i.imgur.com/CShaFcV.png">
      <p style="font-size:13px; color:#9c9c9c;">2018 Dollar Shave Club. All Rights Reserved.</p>
      <p style="font-size:11px; color:#757575;">13335 Maxella Ave. Marina Del Rey, CA 90292</p>
      <a href="https://help.dollarshaveclub.com/hc/en-us/articles/115004873807-Privacy-Policy" style="font-size:11px; color: #545454;">Privacy</a>
      <a href="https://help.dollarshaveclub.com/hc/en-us/sections/115001914007-Membership-Settings" style="font-size:11px; color: #545454;">Unsubscribe</a>
      <br>
      <br>
    </div>
    </tr>
  </table>
</center>

One issue might be a malformed table; there are no `` elements, `.footer` is a direct child of ``, and there's an extra ``. — showdev, May 24 '18 at 18:38
@A.Kelley I have updated my answer below to fix the spacing between the sections. — trevorp, May 24 '18 at 19:20
Absolutely incredible. I never thought I would get so many answers so fast. Thank you, everyone. I now have it displaying properly. Missing the elements was definitely the largest error. Thank you to @showdev and everyone else who pointed that out. trevorp your solution did indeed solve the spacing. One thing I should point out, trevorp and gwally, is that, wouldn't adding a width at the table level prevent the email from being responsive? Aside from that, the email behaves the way I would like it to. Really can't thank you all enough. — A.Kelley, May 24 '18 at 19:51
@A.Kelley Yes, if you want it to stay responsive you should do `width: 100%` on the `` See my updated answer below. — trevorp, May 24 '18 at 20:20

trevorp · Accepted Answer · 2018-05-24T20:24:24.927

The browser isn't rendering your table (because you don't have <td> elements).

Update To make it fully responsive, you can use a table width of 100%. You will also need margin:0 auto; on the img tag:

.footer {
  width: 600px;
  background-color: #262626;
  text-align: center;
  font-family: verdana;
  text-decoration: none;
}

img {
  margin: 0 auto;
}

@media only screen and (max-width: 600px) {
  img {
    max-width: 100% !important;
  }
  .footer {
    max-width: 100% !important;
  }
}

<center>
  <table width="100%" cellpadding="0" style="border-collapse: collapse;">
    <tr>
      <td>
        <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner" target="_blank"><img src="https://i.imgur.com/PDjptBG.jpg" style="display:block;" /></a>
      </td>
    </tr>
    <tr>
      <td>
        <img src="https://i.imgur.com/hQ742x0.jpg" style="display:block;" />
      </td>
    </tr>
    <tr>
      <td>
        <img src="https://i.imgur.com/Tp7E0YJ.jpg" style="display:block;" />
      </td>
    </tr>
    <tr>
      <td>
        <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner" target="_blank"><img src="https://i.imgur.com/jGkDOCo.jpg" style="display:block;" /></a>
      </td>
    </tr>
    <tr>
      <td>
        <a href="https://www.dollarshaveclub.com/our-products/clean/shampoo-and-conditioner-bundle" target="_blank"><img src="https://i.imgur.com/ZO8mC30.jpg" style="display:block;" /></a></td>
    </tr>
    <tr>
      <td class="footer">
        <img style="padding-top:20px; display:block;" src="https://i.imgur.com/CShaFcV.png" />
        <p style="font-size:13px; color:#9c9c9c;">2018 Dollar Shave Club. All Rights Reserved.</p>
        <p style="font-size:11px; color:#757575;">13335 Maxella Ave. Marina Del Rey, CA 90292</p>
        <a href="https://help.dollarshaveclub.com/hc/en-us/articles/115004873807-Privacy-Policy" target="_blank" style="font-size:11px; color: #545454;">Privacy</a>
        <a href="https://help.dollarshaveclub.com/hc/en-us/sections/115001914007-Membership-Settings" target="_blank" style="font-size:11px; color: #545454;">Unsubscribe</a>
        <br>
        <br>
      </td>
    </tr>
  </table>
</center>

With the current code the table width was 100%, That's what caused the image issues. By adding a set width like 600, you solve that issue. — gwally, May 24 '18 at 20:44
Table set width of 600 seems to prevent the email from being responsive. And table width of 100% makes the footer stretch to the full width of whatever size the screen is. Not terrible. But it would be nice if the footer could stay at 600px and then shrink when the width of the screen is less than that... solved it. I just put max-width="600px" in the table element. — A.Kelley, May 24 '18 at 22:33

score 1 · Answer 2 · answered May 24 '18 at 19:00

Your html code is a bit of a disaster. To start, your table lacks <td> cells. You need one for every table row. You can't start a row and use a <div>. They don't mix.

Your table needs a width to keep it from spreading out. I added width="600" because that's a good width for an email.

Your images will behave better if you add display: block; to an inline style. Also, you might as well add a closing slash />.

Use the html below which fixes most of the issues you're having.

Good luck.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Content not aligning in center</title>
  <style>
    .footer {
      width: 600px;
      background-color: #262626;
      text-align: center;
      font-family: verdana;
      text-decoration: none;
    }

    @media only screen and (max-width: 480px) {
      img {
        max-width: 100% !important;
     }
     .footer {
       max-width: 100% !important;
     }
   }
  </style>
</head>
<body>
<center>
<table width="600">
  <tr>
    <td>
      <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner" target="_blank"><img src="https://i.imgur.com/PDjptBG.jpg" style="display:block;" /></a>
  </td>
</tr>
<tr>
  <td>
    <img src="https://i.imgur.com/hQ742x0.jpg" style="display:block;" />
  </td>
</tr>
<tr>
  <td>
    <img src="https://i.imgur.com/Tp7E0YJ.jpg" style="display:block;" />
   </td>
</tr>
<tr>
  <td>
    <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner" target="_blank"><img src="https://i.imgur.com/jGkDOCo.jpg" style="display:block;" /></a>
  </td>
</tr>
<tr>
  <td>
    <a href="https://www.dollarshaveclub.com/our-products/clean/shampoo-and-conditioner-bundle target="_blank"><img src="https://i.imgur.com/ZO8mC30.jpg" style="display:block;" /></a></td>
</tr>
<tr>
<td class="footer">
  <img style="padding-top:20px; display:block;" src="https://i.imgur.com/CShaFcV.png" />
  <p style="font-size:13px; color:#9c9c9c;">2018 Dollar Shave Club. All Rights Reserved.</p>
  <p style="font-size:11px; color:#757575;">13335 Maxella Ave. Marina Del Rey, CA 90292</p>
  <a href="https://help.dollarshaveclub.com/hc/en-us/articles/115004873807-Privacy-Policy" target="_blank" style="font-size:11px; color: #545454;">Privacy</a>
  <a href="https://help.dollarshaveclub.com/hc/en-us/sections/115001914007-Membership-Settings" target="_blank" style="font-size:11px; color: #545454;">Unsubscribe</a>
  <br>
  <br>
  </td>
  </tr>
</table>
</center>
</body>
</html>

Thank you for this @gwally. This is incredibly helpful. Just wanted to ask about the width. Wouldn't giving a width at the table level prevent the email from being responsive? — A.Kelley, May 24 '18 at 20:05
@A.Kelley The email looks fine in mobile and in legacy email clients like Outlook. It's not quite full width in IOS on an iPhone X. You can focus on creating `@media` queries to address that or choose an email template that works better in mobile. It really didn't work before. — gwally, May 24 '18 at 20:41

score 0 · Answer 3 · answered May 24 '18 at 18:48

Just as @showdev said. Your problem was that there were no <td> elements.

<!DOCTYPE html>

<head>
    <style type="text/css">
        .footer {
            width: 600px;
            background-color: #262626;
            text-align: center;
            font-family: verdana;
            text-decoration: none;
        }

        @media only screen and (max-width: 480px) {
            img {
                max-width: 100% !important;
            }
            .footer {
                max-width: 100% !important;
            }
        }
    </style>
</head>
<html>

<body>
    <center>
        <table>
            <tr>
                <td>

                    <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner">
                        <img src="https://i.imgur.com/PDjptBG.jpg">
                    </a>
                </td>
            </tr>
            <tr>
                <td>

                    <img src="https://i.imgur.com/hQ742x0.jpg">
                </td>
            </tr>
            <tr>
                <td>

                    <img src="https://i.imgur.com/Tp7E0YJ.jpg">
                </td>
            </tr>
            <tr>
                <td>

                    <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner">
                        <img src="https://i.imgur.com/jGkDOCo.jpg">
                    </a>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="https://www.dollarshaveclub.com/our-products/clean/shampoo-and-conditioner-bundle">
                        <img src="https://i.imgur.com/ZO8mC30.jpg">
                    </a>
                </td>

            </tr>
            <tr>
                <td>

                    <div class="footer">
                        <img style="padding-top:20px;" src="https://i.imgur.com/CShaFcV.png">
                        <p style="font-size:13px; color:#9c9c9c;">2018 Dollar Shave Club. All Rights Reserved.</p>
                        <p style="font-size:11px; color:#757575;">13335 Maxella Ave. Marina Del Rey, CA 90292</p>
                        <a href="https://help.dollarshaveclub.com/hc/en-us/articles/115004873807-Privacy-Policy" style="font-size:11px; color: #545454;">Privacy</a>
                        <a href="https://help.dollarshaveclub.com/hc/en-us/sections/115001914007-Membership-Settings" style="font-size:11px; color: #545454;">Unsubscribe</a>
                        <br>
                        <br>
                    </div>

                </td>
            </tr>
        </table>
    </center>
</body>

</html>

Content not aligning in center

3 Answers3