14 Replies Latest reply on Feb 23, 2018 12:23 PM by Dan Stevens

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

    Alex Ebelhar

      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

        • Re: why does the 2-column icon box not full width in mobile gmail?
          Grégoire Michel

          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

            • Re: why does the 2-column icon box not full width in mobile gmail?
              Alex Ebelhar

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

                • Re: why does the 2-column icon box not full width in mobile gmail?
                  Grégoire Michel

                  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

                    • Re: why does the 2-column icon box not full width in mobile gmail?
                      Alex Ebelhar

                      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

                        • Re: why does the 2-column icon box not full width in mobile gmail?
                          Grégoire Michel

                          HI Alex,

                           

                          Paste the code. Hard to follow you here without it

                           

                          -Greg

                            • Re: why does the 2-column icon box not full width in mobile gmail?
                              Alex Ebelhar

                              <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>

                    • Re: why does the 2-column icon box not full width in mobile gmail?
                      Alex Ebelhar

                      that is where i noticed the problem to begin with was on litmus