Can't Center Text For Newsletter In Mobile

Working on an email blast and for the life of me I cannot get the text to center in mobile view. The URL is: http://strictpixel.com/clients/relevant/fbc/email/

I am referencing the top navigation, under the logo. In mobile, it slides to the left and I am not sure why.

I know this is something simple but I have been pulling my hair out for an hour.

Thanks!

Solution

Yeah that really is a mess and you should consider refactoring. There's no way you need all those nested tables.

However, if you plan to keep it this way, the problem is likely stemming from your HTML being invalid. First, the <center> tag is dead and should not be used. Second, you break the flow of your table structure beginning after the comment I inserted below:

            <p class="template-label">469-952-6404</p></td>
            <td class="expander"></td>
        </tr>
    </table>
</td>

<!-- You can't start the new table below here without first either
opening a new <td> or closing the <tr> and <table> that is open!!  -->

<table class="container">
    <tr>
        <td class="wrapper">
            <table class="twelve columns" style="background-color:#f1f5f8;vertical-align:center;">
...

My best guess is that you missed opening up the next <td> tag just before that table begins.

Use an online HTML validator to help you find where your table structure is broken. Something like http://www.freeformatter.com/html-validator.html may prove useful.