Creating a two-column layout that is stacked and centred on mobile — WITHOUT media queries

While working Canvas, the beautiful new email builder from Campaign Monitor, we experimented with a truckload of different ideas and strategies for creating responsive emails. One method that I discovered was a solution for a problem that has really annoyed me for some time — how to create a two-column design that stacks to a single, centred column on mobile, all without media queries so that it works in the Gmail, Yahoo and Outlook.com mobile apps.

Finally I cracked it and I’ve shared the results over on the Campaign Monitor Blog. I hope it spares you as much heartache as it has spared me so far. Check it out here!

Two column design on desktop — centred on mobile

Published by

Nicole Merlin

I'm an HTML email designer and developer from Melbourne, Australia. I love email, design, typography, calligraphy and curling up with a book.

  • hill2010

    Hello!

    I am using the hybrid/fluid method where I am hiding a right border on mobile.

    Of course my class=”noborder” works on all the mobile clients except the GMAIL APP.

    So here is my tag:

    And here’s what my class looks like:

    .noborder {
    border-style: none !important;
    }

    Is there a way I could inline this noborder class so the Gmail app will hide the border?

    I’ve tried ALL the css inline tools and it’s not doing the trick.

    Any help would be incredible!!!

    Thanks