2
Swap table/tr Position
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
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
Then you can move the menu down using this CSS
Damn you Mark Robbins! Always teaching me the new stuff!!
Be thankful Sophie! Have a google if you don't know who he is ;)
Haha cheers Gordon.
It's a cool little trick that one.
That's great, thanks Mark!
Are there any issues caused by tables directly in tables (as below):
No, that should work fine for you.
There's no reply option to your last comment, so just wanted to say thanks for all your help. :)
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
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.
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?