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, 4 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; }
}
</style>

Brian Thies
Professional Email Developer
Thies Publishing

200,000 companies around the world can't be wrong.

From Australia to Zimbabwe, and everywhere in between, companies count on 
Campaign Monitor for email campaigns that drive real business results.

Get started for free
1-888-533-8098