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, 1 year 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
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw

Sign up for free.
Then send campaigns for as little as $9p/m

Create an account