why does the 2-column icon box not full width in mobile gmail?

[Anonymous]

wondering how to make the 2-column icon box full width in all mobile gmail/android emails (this is from litmus). any help is appreciated. thank

[Grégoire_Miche2]

Hi Alex,

It all depends on how your email template has been developped. What version of Android ? The oldest versions used to be quite difficult to develop for.

-Greg

[Anonymous]

it happens in all versions of gmail & google inbox. it works just fine in iOS

[Grégoire_Miche2]

Hi Alex,

It probably means it has been developped using media queries only, and not a complete email fluid development approach. The problem is that Media queries are supported by iphone, but only on the most recent versions of Android devices. Android devices take a full inlining of the CSS code to work.

-Greg

[Anonymous]

Is there no way to treat the container like a full width text container or any other full width container? the backgound colors can be adjusted in those

[Grégoire_Miche2]

HI Alex,

Paste the code. Hard to follow you here without it

-Greg

[Anonymous]

<table id="half" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="m_half mktoModule" mktoname="Content Blocks - 1">

                      <tbody>

                        <tr>

                          <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${halfBackgroundColor};" bgcolor="${halfBackgroundColor}" valign="top">

                            <center>

                              <table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="640">

                                <tbody>

                                  <tr>

                                    <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${halfBackgroundColor2};" bgcolor="${halfBackgroundColor2}">

                                      <table class="table1-2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="left" border="0" cellpadding="0" cellspacing="0" width="320">

                                        <tbody>

                                          <tr>

                                            <td class="content" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; text-align: center; border-collapse: collapse;">

                                              <table class="contents" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0">

                                                <tbody>

                                                  <tr>

                                                    <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;text-align: center;border-collapse: collapse;line-height:${halfSpacer};font-size:${halfSpacer};" height="${halfSpacer}"> </td>

                                                  </tr>

                                                  <tr>

                                                    <td class="icon" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; text-align: center; border-collapse: collapse;">

                                                      <div style="display:inline-block" class="mktoImg" mktoname="Icon" id="icon" mktolockimgsize="true">

                                                        <a><img src="http://marketo-landing.tendrildemo.com/rs/620-RFY-437/images/ecobee4.png" style="-ms-interpolation-mode: bicubic; outline: none; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; text-decoration: none; border-top-width: 0; width: auto; height: auto; max-width: 100%; line-height: 100%; display: inline-block;" /></a>

                                                      </div></td>

                                                  </tr>

                                                  <tr>

                                                    <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;text-align: center;border-collapse: collapse;line-height:${halfSpacer3};font-size:${halfSpacer3};" height="${halfSpacer3}"> </td>

                                                  </tr>

                                                  <tr>

                                                    <td class="primary-font text" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;-ms-text-size-adjust: 100%;text-align: center;padding-left: 20px;font-family:'Roboto', Arial, sans-serif;color: #FFF;font-size: 13px;padding-top: 0;padding-right: 20px;padding-bottom: 0;border-collapse: collapse;">

                                                      <div class="mktoText" mktoname="Left Text" id="text2">

                                                        <div style="text-align: left;">

                                                          <span style="font-size: 16px; line-height: 26px; font-family: arial, helvetica, sans-serif;">IM Home connects to your ecobee to learn what keeps you comfortable </span>

                                                        </div>

                                                      </div></td>

                                                  </tr>

                                                  <tr>

                                                    <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;text-align: center;border-collapse: collapse;line-height:${halfSpacer4};font-size:${halfSpacer4};" height="${halfSpacer4}"> </td>

                                                  </tr>

                                                </tbody>

                                              </table> </td>

                                          </tr>

                                        </tbody>

                                      </table>

                                      <table class="table1-2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="right" border="0" cellpadding="0" cellspacing="0" width="320">

                                        <tbody>

                                          <tr>

                                            <td class="content" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;text-align: center;border-collapse: collapse;background-color:${halfBackgroundColor3};" bgcolor="${halfBackgroundColor3}">

                                              <table class="contents" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0">

                                                <tbody>

                                                  <tr>

                                                    <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;text-align: center;border-collapse: collapse;line-height:${halfSpacer5};font-size:${halfSpacer5};" height="${halfSpacer5}"> </td>

                                                  </tr>

                                                  <tr>

                                                    <td class="icon" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; text-align: center; border-collapse: collapse;">

                                                      <div style="display:inline-block" class="mktoImg" mktoname="Icon" id="icon2" mktolockimgsize="true">

                                                        <a><img src="http://marketo-landing.tendrildemo.com/rs/620-RFY-437/images/graph.png" style="-ms-interpolation-mode: bicubic; outline: none; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; text-decoration: none; border-top-width: 0; width: auto; height: auto; max-width: 100%; line-height: 100%; display: inline-block;" /></a>

                                                      </div></td>

                                                  </tr>

                                                  <tr>

                                                    <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;text-align: center;border-collapse: collapse;line-height:${halfSpacer7};font-size:${halfSpacer7};" height="${halfSpacer7}"> </td>

                                                  </tr>

                                                  <tr>

                                                    <td class="primary-font text" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;-ms-text-size-adjust: 100%;text-align: center;padding-left: 20px;font-family:'Roboto', Arial, sans-serif;color: #FFF;font-size: 13px;padding-top: 0;padding-right: 20px;padding-bottom: 0;border-collapse: collapse;">

                                                      <div class="mktoText" mktoname="Right Text" id="text3">

                                                        <div style="text-align: left;">

                                                          <span style="font-size: 16px; line-height: 26px; font-family: arial, helvetica, sans-serif;">It makes small changes to your ecobee temperature settings to help you save more</span>

                                                        </div>

                                                      </div></td>

                                                  </tr>

                                                  <tr>

                                                    <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;text-align: center;border-collapse: collapse;line-height:${halfSpacer8};font-size:${halfSpacer8};" height="${halfSpacer8}"> </td>

                                                  </tr>

                                                </tbody>

                                              </table> </td>

                                          </tr>

                                        </tbody>

                                      </table> </td>

                                  </tr>

                                </tbody>

                              </table>

                            </center> </td>

                        </tr>

                      </tbody>

                    </table>

[Anonymous]

hope this helps!

[Grégoire_Miche2]

The styling you are using (-webkit, -ms, mso, -moz) is not supported in older versions of android.

-Greg

[Anonymous]

what about the iOS gmail app?