Menu icon Foundation
Columns Offset Unevenly in Email
<div class="header">
  <table class="container">
    <tr>
      <td>
        <table class="row">
          <tr>
            <th class="small-12 large-6 first last columns large-offset-3">
              <img src="logo.png">
            </th>
            <th class="expander"></th>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

 

Please see above code. When viewing this email, the column containing the logo is offset of center by 32px. Am I missing something in my code? Or is this a bug?

emailcolumnsoffset

<div class="header">
  <table class="container">
    <tr>
      <td>
        <table class="row">
          <tr>
            <th class="small-12 large-6 first last columns large-offset-3">
              <img src="logo.png">
            </th>
            <th class="expander"></th>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

 

Please see above code. When viewing this email, the column containing the logo is offset of center by 32px. Am I missing something in my code? Or is this a bug?

Joe Windeknecht over 3 years ago

Screen Cap of Issue

Corey Schaaf over 3 years ago

This is the format you should be following. It doesn't appear you have  enough tables for your container, row and columns.  Based on the documentation, you also wouldn't include an exapder <th>. 

See if this helps your problem. 

<table class="container">
  <tbody>
    <tr>
      <td>
<!-- Start your Row Table -->
        <table class="row">
          <tbody>
            <tr>
<!-- Start your Columns Table(s) -->
              <th class="small-12 large-6 large-offset-3 columns first last">
                <table>
                  <tr>
                    <th><img src="logo.png"></th>
                  </tr>
                </table>
              </th>
<!-- End Columns Table(s) -->
            </tr>
          </tbody>
        </table>
<!-- End Row Table -->
      </td>
    </tr>
  </tbody>
</table>