Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Column Stacking Help

mmitchell3526

Newbie
Total Posts:  2
Posted: 30 March 2017 07:23 AM

Hello, I am rather new to responsive email coding and need some help solving a column-stacking issue. I’ve attached the html file for reference.

Firstly, I have 5 social media icons. We want the icons to line up all in one row on desktop but on mobile we want 3 on top with 2 stacked underneath. I currently have them stacked on both. Secondly, with the links below the icons, we want them to line up all in one row on desktop but on mobile we want 3 on top with the other 3 stacked underneath. I currently have them stacked on both.

I am at a loss and under a tight deadline so I’d appreciate any help. Thanks! Michele

File Attachments
w4206.html  (File Size: 21KB - Downloads: 56)

 

marjoleinverheij

Avatar
Jr. Member
Total Posts:  31
Posted: 05 April 2017 01:27 AM
[ # 1 ]

Hi!

I updated your code a bit and the social block should now work as you want. Using that code you can also update the links.
I’ve added a wrapper table around the 2 tables with the social icons and put that on align=center without a width. I’ve re moved the table-layout: fixed !important; margin: 0 auto; from the style of those 2 tables and added a align=left to them (which makes them float next to each other). The “margin: 0 auto;” css makes tables float in the center, so adding that to the tables you want next to each other wouldn’t work.

The social icons table have a class now “float-table” which has the style float:none so they stack on mobile instead of stack and align left.

I’ve also removed the styles from the <html> tag, the <title> tag and all meta tags, as it shouldn’t be there. All css should only be added between the <style> tags.

It’s a start I hope you can work with and tweak it however you want smile

Cheers,
Marjolein

File Attachments
w4206-updated.html  (File Size: 18KB - Downloads: 54)

 

mmitchell3526

Newbie
Total Posts:  2
Posted: 11 April 2017 03:06 AM
[ # 2 ]

Hi and thank you so much for your assistance. I’ve made the changes but it’s not working in Outlook 2007. I’ve attached a screenshot and the new code. Do you have any suggestions?

Image Attachments
image001.jpg
File Attachments
w4206-updated-nu2.html  (File Size: 15KB - Downloads: 54)

 

marjoleinverheij

Avatar
Jr. Member
Total Posts:  31
Posted: 11 April 2017 03:42 AM
[ # 3 ]

The Outlook code to make floating tables work was missing smile
Attached the updated version!

File Attachments
w4206-updated-nu3.html  (File Size: 17KB - Downloads: 61)