Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Responsive Columns

Gen3Media

Avatar
Newbie
Total Posts:  1
Posted: 01 December 2016 09:19 PM

I’m looking for a sanity check.
I want to use the following type of layout for building a dynamic email editor with variable max email width and allowing rows of variable columns. i.e. Width and column count can vary.

I liked how it looked everywhere, tested on Litmus, but are there any obvious flaws in the following design?

<!doctype html>
<
html>
  <
head>
    <
meta charset="utf-8">
    <
title>Untitled</title>
  </
head>
  <
body>
      <
style type='text/css'>
            
table {border-collapsecollapse;mso-table-lspace0pt;mso-table-rspace0pt;}
          
            
@media only screen and (max-device-width600px) and (orientationportrait)
            , 
screen and (max-device-height600px) and (orientationlandscape)
            , 
screen and (-webkit-min-device-pixel-ratio2) and (orientationportrait{
                
.SetWidth { min-width100% !important}
                
.SetColumn { min-width100% !importantwidth100% !important}
            }
      
</style>
      
      <
table align="center" style="min-width: 100%">
          <
tbody>
              <
tr>
                <
td class="SetWidth" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse: collapse; width: 600px; text-align: center; vertical-align: top;"><!--[if mso]>
                <
table border="0" cellpadding="0" cellspacing="0" width="100%">
                <
tr>
                <
td valign="top" width="25%">
                <!
[endif]--><table class="SetColumn" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse: collapse; width: 150px; display: inline-table; vertical-align: top;">
                      <
tbody>
                          <
tr>
                              <
td style="width: 100%; min-width: 100%; text-align: left;">
                                  <
div>Test 1</div>
                              </
td>
                          </
tr>
                      </
tbody>
                  </
table><!--[if mso]>
                </
td>
                <
td valign="top" width="25%">
                <!
[endif]--><table class="SetColumn" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse: collapse; width: 150px; display: inline-table; vertical-align: top;">
                      <
tbody>
                          <
tr>
                              <
td style="width: 100%; min-width: 100%; text-align: left;">
                                  <
div>Test 2</div>
                              </
td>
                          </
tr>
                      </
tbody>
                  </
table><!--[if mso]>
                </
td>
                <
td valign="top" width="25%">
                <!
[endif]--><table class="SetColumn" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse: collapse; width: 150px; display: inline-table; vertical-align: top;">
                      <
tbody>
                          <
tr>
                              <
td style="width: 100%; min-width: 100%; text-align: left;">
                                  <
div>Test 3</div>
                              </
td>
                          </
tr>
                      </
tbody>
                  </
table><!--[if mso]>
                </
td>
                <
td valign="top" width="25%">
                <!
[endif]--><table class="SetColumn" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse: collapse; width: 150px; display: inline-table; vertical-align: top;">
                      <
tbody>
                          <
tr>
                              <
td align="center" style="width: 100%; min-width: 100%; text-align: left;">
                                  <
div>Test 4</div>
                              </
td>
                          </
tr>
                      </
tbody>
                  </
table><!--[if mso]>
                </
td>
                </
tr>
                </
table>
                <!
[endif]--></td>
              </
tr>
          </
tbody>
      </
table>
  </
body>
</
html


Thanks for having a look.