html - How to make tables stack, right over left, in responsive email? -
So this is my second responsive design email, so I'm stuck.
I have 2 tables when I look at the mobile so I am trying to stack. How to show 2 tables in desktop mode:
| 1 | 2 |
When viewed on mobile, I want to reveal tables like this:
| 2 | | 1 |
I have tried floating tables and using the position: Sure! Important
But any help or guidance I can not get the desired effect will be greatly appreciated.
I used to do this in a way
how do you stack the column You can use dir = "rtl"
to control. Here's an example:
& lt; Table class = "deviceview" dir = "rtl" width = "100%" cellpadding = "0" cellpaction = "0" limit = "0" style = "border-fall: collapse; MSO-table-lapse: 0pt; MSO -Table-RSPS: 0pt; " & Gt; & Lt; TR & gt; & Lt; Td width = "50%" dir = "ltr" align = "right" square = "full" & gt; & Lt; P style = "mso-table-lspace: 0; mso-table-rspace: 0; padding: 0; margin: 0;" & Gt; & Lt; A href = "#" & gt; & Lt; Img src = "http://placehold.it/440x440&text=RIGHT" alt = "" border = "0" style = "display: block; width: 100%; height: auto;" / & gt; & Lt; / A & gt; & Lt; / P & gt; & Lt; / TD & gt; & Lt; Td width = "50%" dir = "ltr" align = "left" square = "full" & gt; & Lt; A href = "#" & gt; & Lt; Img src = "http://placehold.it/440x440&text=LEFT" alt = "" border = "0" style = "display: block; width: 100%; height: auto;" / & gt; & Lt; / A & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; / Table & gt;
Questions with a @ media
:
@ media only screen and (max-width: 640px) {. Full {display: block; Width: 100%; }}
is complete here
Comments
Post a Comment