Create a Discussion

Swap table/tr Position

Sophie Graham posted 2016-12-01 16:06:49

Hi all,

I am trying to see if there is a method for swapping table positions in an email for mobile.
My design has a menu under the header on desktop and then the same menu above the footer on mobile.

Desktop:
[HEADER]
[MENU]
[BODY]
[FOOTER]

Mobile:
[HEADER]
[BODY]
[MENU]
[FOOTER]

Any advice/help would be good.
Cheers

Mark Robbins replied 2016-11-25 10:44:08

There are a few options here, but my preferred method is to use the <caption> element.

So you can layout your content roughly like this

<table>
  <tr>
    <td>
      HEADER
    </td>
  </tr>
</table>
<table>
  <caption>
    MENU
  </caption>
  <tr>
    <td>
      BODY
    </td>
  </tr>
</table>
<table>
  <tr>
    <td>
      FOOTER
    </td>
  </tr>
</table>

Then you can move the menu down using this CSS

@media screen and (max-width:600px){
  caption{
    caption-side:bottom;
  }
}

Reply to Mark Robbins

Gordon Mcleod replied 2016-11-25 12:07:02

Damn you Mark Robbins! Always teaching me the new stuff!!

Be thankful Sophie! Have a google if you don't know who he is ;)

Mark Robbins replied 2016-11-25 12:15:17

Haha cheers Gordon.
It's a cool little trick that one.

Sophie Graham replied 2016-11-28 10:20:13

That's great, thanks Mark!
Are there any issues caused by tables directly in tables (as below):

<table>
<caption>
<table>
<tr>
<td>
MENU
</td>
</tr>
</table>
</caption>
<tr>
<td>
BODY
</td>
</tr>
</table>

Mark Robbins replied 2016-11-28 11:26:36

No, that should work fine for you.

Sophie Graham replied 2016-12-01 16:06:49

There's no reply option to your last comment, so just wanted to say thanks for all your help. :)

Sophie Graham replied 2016-11-28 11:33:57

Thanks.
A Litmus test shows the BODY out of line in Outlook 2007/2010, have you had similar issues before?
https://litmus.com/pub/af02edd

Mark Robbins replied 2016-11-28 12:14:58

No not seen that before, Outlook is always pain.

I try and avoid tables where possible but if you need one in here this technique might be a better solution for you.

<table>
  <tr>
    <td>
      HEADER
    </td>
  </tr>
</table>
<div class="wrapper">
<table class="menu">
  <tr>
    <td>
      MENU
    </td>
  </tr>
</table>
<table>
  <tr>
    <td>
      BODY
    </td>
  </tr>
</table>
</div>
<table>
  <tr>
    <td>
      FOOTER
    </td>
  </tr>
</table>

@media screen and (max-width:600px){
  .wrapper{
    display:table;
  }
  .menu{
    display:table-footer-group;
  }
}

Gordon Mcleod replied 2016-11-25 09:45:37

I'd advise against this as you'll need to have 2 menus and then use show/hide for desktop and mobile - also you cannot fully hide elements in the Outlook Web App, so don't try hiding things on desktop if you have a decent amount of subscribers using that client, otherwise they'll get both menus.

You could just put some additional nav links in the footer?

Reply to Gordon Mcleod

The Litmus Community is the place for email designers and marketers to learn, grow, and educate each other about everything email.

Swap table/tr Position

Sign in to Community

Join the Litmus Community

Sign up to Community

Forgot password