After dozens of tests I've found that RED has one really weak point with my projects.
So I've tried to make a project as simple as possible to illustrate the issue.
Here's the code:
<html lang="en" style="">
<head>
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<title></title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width" name="viewport" />
<style id="vendor_styles" type="text/css">html { -ms-overflow-y: auto !important; } body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } img { -ms-interpolation-mode: bicubic; } table.radius td { -webkit-border-radius: 3px; -moz-border-radius: 3px; } table.round td { -webkit-border-radius: 500px; -moz-border-radius: 500px; } table.columns td.element_connector, td.element_connector { width: 100% !important; width: calc(100%) !important; width: -webkit-calc(100%) !important; } table.container, table.columns, table.column, table.social-box-wrapper, table.social-box-text-wrapper { *table-layout: auto !important; } div, p, a, li, td { -webkit-text-size-adjust: none; }
</style>
<style type="text/css">@media screen and (max-device-width: 1000px), screen and (max-width: 1000px) { table[class="body"] center { min-width: 0px !important; } table[class="body"] .container { max-width: 1000px; width: 100% !important; } table[class="body"] .container > tbody > tr > td:not(.wrapper) { min-width: 0px !important; } table[class="body"] .row { width: 100% !important; display: block !important; } table[class="body"] .row > tbody > tr > td:not(.wrapper) { min-width: 0px !important; } table[class="body"] .row::after { content: ' '; display: table; height: 0px; clear: both; visibility: hidden; } table[class="body"] table.columns[class*="small-"] { display: block !important; } table.row > tbody > tr > td.center { padding: 0px !important; display: block !important; } table[class="body"] .wrapper { display: block !important; float: none !important; min-width: 0px !important; } table.row > tbody, table.row > tbody > tr { display: block !important; width: 100% !important; } table[class="body"] .columns, table[class="body"] .column { max-width: 1000px !important; table-layout: fixed !important; float: left !important; padding-right: 0px !important; padding-left: 0px !important; } table[class="body"] .columns td.element_connector, table[class="body"] .column td.element_connector { width: 100% !important; min-width: 0px !important; } table[class="body"] .wrapper.first .columns, table[class="body"] .wrapper.first .column { display: table !important; } table[class="body"] .twelve { width: 100% !important; } table[class="body"] .wrapper.twelve { float: left !important; } table[class="body"] .wrapper.twelve .columns, table[class="body"] .wrapper.twelve .column { width: 100% !important; } table[class="body"] .eleven { width: 91.66666667% !important; } table[class="body"] .wrapper.eleven { float: left !important; } table[class="body"] .wrapper.eleven .columns, table[class="body"] .wrapper.eleven .column { width: 100% !important; } table[class="body"] .ten { width: 83.33333333% !important; } table[class="body"] .wrapper.ten { float: left !important; } table[class="body"] .wrapper.ten .columns, table[class="body"] .wrapper.ten .column { width: 100% !important; } table[class="body"] .nine { width: 75% !important; } table[class="body"] .wrapper.nine { float: left !important; } table[class="body"] .wrapper.nine .columns, table[class="body"] .wrapper.nine .column { width: 100% !important; } table[class="body"] .eight { width: 66.66666667% !important; } table[class="body"] .wrapper.eight { float: left !important; } table[class="body"] .wrapper.eight .columns, table[class="body"] .wrapper.eight .column { width: 100% !important; } table[class="body"] .seven { width: 58.33333333% !important; } table[class="body"] .wrapper.seven { float: left !important; } table[class="body"] .wrapper.seven .columns, table[class="body"] .wrapper.seven .column { width: 100% !important; } table[class="body"] .six { width: 50% !important; } table[class="body"] .wrapper.six { float: left !important; } table[class="body"] .wrapper.six .columns, table[class="body"] .wrapper.six .column { width: 100% !important; } table[class="body"] .five { width: 41.66666667% !important; } table[class="body"] .wrapper.five { float: left !important; } table[class="body"] .wrapper.five .columns, table[class="body"] .wrapper.five .column { width: 100% !important; } table[class="body"] .four { width: 33.33333333% !important; } table[class="body"] .wrapper.four { float: left !important; } table[class="body"] .wrapper.four .columns, table[class="body"] .wrapper.four .column { width: 100% !important; } table[class="body"] .three { width: 25% !important; } table[class="body"] .wrapper.three { float: left !important; } table[class="body"] .wrapper.three .columns, table[class="body"] .wrapper.three .column { width: 100% !important; } table[class="body"] .two { width: 16.66666667% !important; } table[class="body"] .wrapper.two { float: left !important; } table[class="body"] .wrapper.two .columns, table[class="body"] .wrapper.two .column { width: 100% !important; } table[class="body"] .one { width: 8.33333333% !important; } table[class="body"] .wrapper.one { float: left !important; } table[class="body"] .wrapper.one .columns, table[class="body"] .wrapper.one .column { width: 100% !important; } table[class="body"] .columns td.twelve, table[class="body"] .column td.twelve { width: 100% !important; } table[class="body"] td.offset-by-twelve { padding-left: 0px !important; } table[class="body"] .small-twelve { width: 100% !important; } table[class="body"] .columns td.eleven, table[class="body"] .column td.eleven { width: 91.66666667% !important; } table[class="body"] td.offset-by-eleven { padding-left: 0px !important; } table[class="body"] .small-eleven { width: 91.66666667% !important; } table[class="body"] .columns td.ten, table[class="body"] .column td.ten { width: 83.33333333% !important; } table[class="body"] td.offset-by-ten { padding-left: 0px !important; } table[class="body"] .small-ten { width: 83.33333333% !important; } table[class="body"] .columns td.nine, table[class="body"] .column td.nine { width: 75% !important; } table[class="body"] td.offset-by-nine { padding-left: 0px !important; } table[class="body"] .small-nine { width: 75% !important; } table[class="body"] .columns td.eight, table[class="body"] .column td.eight { width: 66.66666667% !important; } table[class="body"] td.offset-by-eight { padding-left: 0px !important; } table[class="body"] .small-eight { width: 66.66666667% !important; } table[class="body"] .columns td.seven, table[class="body"] .column td.seven { width: 58.33333333% !important; } table[class="body"] td.offset-by-seven { padding-left: 0px !important; } table[class="body"] .small-seven { width: 58.33333333% !important; } table[class="body"] .columns td.six, table[class="body"] .column td.six { width: 50% !important; } table[class="body"] td.offset-by-six { padding-left: 0px !important; } table[class="body"] .small-six { width: 50% !important; } table[class="body"] .columns td.five, table[class="body"] .column td.five { width: 41.66666667% !important; } table[class="body"] td.offset-by-five { padding-left: 0px !important; } table[class="body"] .small-five { width: 41.66666667% !important; } table[class="body"] .columns td.four, table[class="body"] .column td.four { width: 33.33333333% !important; } table[class="body"] td.offset-by-four { padding-left: 0px !important; } table[class="body"] .small-four { width: 33.33333333% !important; } table[class="body"] .columns td.three, table[class="body"] .column td.three { width: 25% !important; } table[class="body"] td.offset-by-three { padding-left: 0px !important; } table[class="body"] .small-three { width: 25% !important; } table[class="body"] .columns td.two, table[class="body"] .column td.two { width: 16.66666667% !important; } table[class="body"] td.offset-by-two { padding-left: 0px !important; } table[class="body"] .small-two { width: 16.66666667% !important; } table[class="body"] .columns td.one, table[class="body"] .column td.one { width: 8.33333333% !important; } table[class="body"] td.offset-by-one { padding-left: 0px !important; } table[class="body"] .small-one { width: 8.33333333% !important; } table[class="body"] .right-text-pad, table[class="body"] .text-pad-right { padding-left: 10px !important; } table[class="body"] .left-text-pad, table[class="body"] .text-pad-left { padding-right: 10px !important; } table[class="body"] table.image-component > tbody > tr > td.element, table[class="body"] table.image-component-right > tbody > tr > td.element, table[class="body"] table.image-table > tbody > tr > td.element, table[class="body"] table.link-image-table > tbody > tr > td.element { width: auto; } table[class="body"] table td.social-image-cell { width: auto; } } @media only screen and (max-width: 1000px) { table[class="body"] .hide-for-small, table[class="body"] .show-for-desktop { display: none !important; } table[class="body"] .show-for-small, table[class="body"] .hide-for-desktop { display: inherit !important; } } @media screen and (max-device-width: 1000px), screen and (max-width: 1000px) { .form_results div td { display: inline-block !important; width: 100% !important; } .cart_summary div td:nth-child(3), .cart_summary div th:nth-child(3) { display: none; } .cart_summary div tr:last-child td:first-child { display: block; } } @media screen and (max-width:1000px) { } @media screen and (max-device-width: 800px), screen and (max-width: 800px) { table[class="body"] .small-800-twelve { width: 100% !important; } table[class="body"] .small-800-eleven { width: 91.66666667% !important; } table[class="body"] .small-800-ten { width: 83.33333333% !important; } table[class="body"] .small-800-nine { width: 75% !important; } table[class="body"] .small-800-eight { width: 66.66666667% !important; } table[class="body"] .small-800-seven { width: 58.33333333% !important; } table[class="body"] .small-800-six { width: 50% !important; } table[class="body"] .small-800-five { width: 41.66666667% !important; } table[class="body"] .small-800-four { width: 33.33333333% !important; } table[class="body"] .small-800-three { width: 25% !important; } table[class="body"] .small-800-two { width: 16.66666667% !important; } table[class="body"] .small-800-one { width: 8.33333333% !important; } } @media screen and (max-width:800px) { } @media screen and (max-width: 440px) { body .row.branded-proud .paragraph p { font-size: 12px !important; } body .row.branded-proud .link-image-table.red-logo > tbody > tr td.element img { max-width: 60px !important; } }
</style>
</head>
<body style="min-width:100%;margin:0px;padding:0px;width:100%;border:none;max-width:none;position:relative;mso-font-alt: Times;font-family:Georgia, Times, 'Times New Roman', serif;">
<table border="0" cellpadding="0" cellspacing="0" class="body" style="height:100%;width:100%;">
<tbody>
<tr>
<td align="center" class="center" style="text-align:center; display:none !important;" valign="top"><!--[if !mso]--><!-- --></td>
<td align="center" class="center" style="text-align:center;" valign="top"><!--<![endif]-->
<center class="grid_selector" style="width:100%;"><!--[if !mso]--><!-- --><img src="http://sdrive-storage.s3.amazonaws.com/red-resources/551adef18a0520/00764709/blank.png" style="width:1px; height:0px; max-height:0px; display: block;" /><!--<![endif]--><!--[if gte mso 9]><table cellpadding="0" cellspacing="0" border="0" class="container container-fluid" style="table-layout:fixed;margin:0px auto;text-align:inherit;display:table;display:none; mso-hide: none;" width="1000"><![endif]--><!--[if !mso]--><!-- -->
<table border="0" cellpadding="0" cellspacing="0" class="container container-fluid" style="max-width:1000px;width:100%;table-layout:fixed;margin:0px auto;text-align:inherit;display:table;*width:1000px;"><!--<![endif]-->
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" class="row" style="width:100%;position:relative;">
<tbody>
<tr>
<td style="width:1000px;"><!--[if gte mso 9]><table cellpadding="0" cellspacing="0" border="0" class="columns six small-800-twelve" style="margin:0px auto;text-align:left;table-layout:fixed;display:none; mso-hide: none;" align="left" width="500"><![endif]--><!--[if !mso]--><!-- -->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="columns six small-800-twelve" style="margin:0px auto;text-align:left;table-layout:fixed;max-width:500px;width:50%;*width:500px;"><!--<![endif]-->
<tbody>
<tr>
<td class="expander" style="padding-left:5px;width:0.000001pt;"> </td>
<td class="element_connector" style="padding:0px;height:35px;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" class="image-text-left" style="width:100%;clear:both;text-align:left;">
<tbody>
<tr>
<td class="element" style="text-align:left;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="image-component" style="width:50%;">
<tbody>
<tr>
<td class="element" style="text-align:left;padding-right:15px;overflow:hidden;"><!--[if gte mso 9]><img alt="Placeholder Image" src="http://sdrive-storage.s3.amazonaws.com/haussmann/57558820bb0392/19515930/placeholder-4x3.png" style="outline: none; text-decoration: none; display: block; clear: none; float: none; margin-left: auto; margin-right: auto;display:none; mso-hide: none;" align="center" width="230"><![endif]--><!--[if !mso]--><!-- --><img align="center" alt="Placeholder Image" src="http://sdrive-storage.s3.amazonaws.com/haussmann/57558820bb0392/19515930/placeholder-4x3.png" style="outline: none; text-decoration: none; display: block; clear: none; float: none; width: 100%; height: auto; max-width: 230px; margin-left: auto; margin-right: auto;*width:230px;" /><!--<![endif]--></td>
</tr>
</tbody>
</table>
<p class="paragraph-component" style="color:#222222;mso-font-alt: Helvetica;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:normal;padding:0px;text-align:left;line-height:1.5;font-size:14px;margin:0px 0px 1.35em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</td>
</tr>
</tbody>
</table>
</td>
<td class="expander" style="padding-left:5px;width:0.000001pt;"> </td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]></td><![endif]--><!--[if gte mso 9]><td style="width:500px"><![endif]--><!--[if gte mso 9]><table cellpadding="0" cellspacing="0" border="0" class="columns six small-800-twelve column-1" id="column-1" style="margin:0px auto;text-align:left;table-layout:fixed;display:none; mso-hide: none;" align="left" width="500"><![endif]--><!--[if !mso]--><!-- -->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="columns six small-800-twelve column-1" id="column-1" style="margin:0px auto;text-align:left;table-layout:fixed;max-width:500px;width:50%;*width:500px;"><!--<![endif]-->
<tbody>
<tr>
<td class="expander" style="padding-left:5px;width:0.000001pt;"> </td>
<td class="element_connector" style="padding:0px;height:35px;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" class="image-text-left" style="width:100%;clear:both;text-align:left;">
<tbody>
<tr>
<td class="element" style="text-align:left;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="image-component" style="width:50%;">
<tbody>
<tr>
<td class="element" style="text-align:left;padding-right:15px;overflow:hidden;"><!--[if gte mso 9]><img alt="Placeholder Image" src="http://sdrive-storage.s3.amazonaws.com/haussmann/57558820bb0392/19515930/placeholder-4x3.png" style="outline: none; text-decoration: none; display: block; clear: none; float: none; margin-left: auto; margin-right: auto;display:none; mso-hide: none;" align="center" width="230"><![endif]--><!--[if !mso]--><!-- --><img align="center" alt="Placeholder Image" src="http://sdrive-storage.s3.amazonaws.com/haussmann/57558820bb0392/19515930/placeholder-4x3.png" style="outline: none; text-decoration: none; display: block; clear: none; float: none; width: 100%; height: auto; max-width: 230px; margin-left: auto; margin-right: auto;*width:230px;" /><!--<![endif]--></td>
</tr>
</tbody>
</table>
<p class="paragraph-component" style="color:#222222;mso-font-alt: Helvetica;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:normal;padding:0px;text-align:left;line-height:1.5;font-size:14px;margin:0px 0px 1.35em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</td>
</tr>
</tbody>
</table>
</td>
<td class="expander" style="padding-left:5px;width:0.000001pt;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Here you can find the project (RED for business): http://www.filedropper.com/project-sampl.
The idea is to use the 6&6 horizontal span switching to 12&12 vertical form 800px and less.
It works fine in browser, in outlook, in full-screen Gmail, in hotmail, on the iphone etc:
http://img11.hostingpics.net/thumbs/mini_723548chrome.jpg http://img11.hostingpics.net/thumbs/mini_477551chromesmall.jpg http://img11.hostingpics.net/thumbs/mini_375807gmail.jpg http://img11.hostingpics.net/thumbs/mini_668048outlook.jpg
But in Gmail app!.. Just look at this:
http://img11.hostingpics.net/thumbs/mini_984373gmailapp.png
OH GOD WHY???
http://img11.hostingpics.net/pics/750991neutralwhyyyyy.png
So... why? What's a problem with Gmail app?