Gmail app issues - Post ID 262637

User 2813010 Photo


Registered User
4 posts

Hello

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:

<!DOCTYPE html>
<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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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?
User 103173 Photo


VP of Software Development
0 posts

The project file link is not working. Can you verify the correct link to the project file?
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 2813010 Photo


Registered User
4 posts

Scott Swedorski wrote:
The project file link is not working. Can you verify the correct link to the project file?


Yes, sorry, it's http://www.filedropper.com/project-sample
User 103173 Photo


VP of Software Development
0 posts

I just ran a Litmus test on your project and I am not seeing any issues off hand here.

http://s33.postimg.org/9izx8g83z/Screen_Shot_2016_06_09_at_11_36_28_AM.png

What device and OS are you using with the Gmail App?
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 2813010 Photo


Registered User
4 posts

Scott Swedorski wrote:
I just ran a Litmus test on your project and I am not seeing any issues off hand here.

http://s33.postimg.org/9izx8g83z/Screen_Shot_2016_06_09_at_11_36_28_AM.png

What device and OS are you using with the Gmail App?


It's a Gmail app 6.5-1.123769152.release
My phone works on Android 4.1.2, device WIKO CINK FIVE
User 2484360 Photo


Registered User
3,293 posts

That is a very old Andriod version. All the test we ran have come back good, I would recommend upgrading to 4.4 or 5.0 as that is the most widely used version.
User 2813010 Photo


Registered User
4 posts

Adam East wrote:
That is a very old Andriod version. All the test we ran have come back good, I would recommend upgrading to 4.4 or 5.0 as that is the most widely used version.


Oh... I am not quite sure I can upgrade it. I'll check it out on the devices of my friends first.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.