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; }

Brian Thies
Professional Email Developer
Thies Publishing

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free