Create a Discussion

Swap table/tr Position

Sophie Graham posted 2016-11-24 17:16:12

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

Swap table/tr Position

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password