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

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