responsive 2-to-1 column layouts:::using display:block

Is it possible to use display:block on td in HTML email, to achieve responsive table design?

BThies BThies, 2 years ago

If you have two side-by-side cells (or more) that you want to fill a 320px window by stacking them in mobile, you can assign both <TD>'s a class of float320 and use the following style code in your <HEAD>:

<style type="text/css">
    /* Mobile-specific Styles */
    @media only screen and (min-device-width: 1px) and (max-device-width: 569px), only screen and (min-device-width: 570px) and (max-device-width: 720px) and (orientation:portrait) {
     td[class=float320] { clear:both !important; float:left !important; width:320px !important; }

Brian Thies
Thies Publishing
Skype:  thiespublishing    Twitter: thiesbw

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