Hiding Info from Desktop view


I'm trying to build a template that has 2 columns but will then display as a single column for mobile versions (I do display: none; using media query for screen below 480px in the css).

What I am wondering is if I can have a simpler version of the 2nd column, that I can hide for the normal desktop version but show below the main info in the mobile/iPhone version.

Hope that makes sense. (Basically want something to show in iPhone, but hide on Desktop).

Current issues
Have tried using display: none; inline style
ie <table class="show" style="display:none;">

And use media queries to show this table. However, the table is still showing in gmail and outlook... If i use !important in the inline style, then i can't get the iPhone to show it.

Anyone know of a 2-col template then then shows as a single for mobile? That may have code I need?


oneblackcrayon oneblackcrayon, 5 years ago

Hi bdiddymc!
You may want to try Media Queries as a work around for your two columns/one column layout.

Join 150,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free