Gmail responsive mail display problem

Hi,

We re-coded our bulletin mails to become responsive as you instructed. We have a two column layout. However if the content in the left column is long, Gmail wraps and hides the right column content. You need to click on three dots to show the content again. In the sample image, content under three dots should be in the right column.

Sample image: https://s3.amazonaws.com/so-archive/gmail-sample.png

Is there any way to fix this gmail problem?

Redferret, 3 years ago

Hi there, is this the android Gmail app? If so It's probably related to the auto-fit feature, I've never seen these dots before though, could you post your code?


Gmail app apologist
ckersoy, 3 years ago

Hi,

Here is the code:

https://s3.amazonaws.com/so-archive/bulletin.html

Thanks.

ckersoy, 3 years ago

Sorry, forgot to reply to your first question:

No this is not android gmail app. It is the web interface to gmail accessed from a desktop browser.

Thanks.

roshodgekiss roshodgekiss, 3 years ago

Hi there ckersoy, I think the issue here may be with your column widths forcing inner columns to wrap underneath each other. The two inner columns in the content have to be < 300px, so including cellpadding, I've reduced these to 280px. There were also image placeholders with width="100%", which really needed to be removed.

Here's a bit of updated code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<a name="1415e846b775908e_bulletin_upper"></a>
<table border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td colspan="2" align="center"><a href="http://test3.steelorbis.com:80/SOAdManager/servlet/GetLinkServlet?region=437&amp;zone=1&amp;type=advanced&amp;bn=3376&amp;cp=10847&amp;ac=10135&amp;addr=http://www.google.com" target="_blank"><img src="" alt="" border="" height="60" width="100%"></a></td>
    </tr>
    <tr>
      <td><img src="" border="0"></td>
      <td><div style="min-height:20px;text-align:right" align="center"> <a href="#1415e846b775908e_" style="font-family:helvetica,arial,sans-serif;color:#336699;font-size:13px"> </a><a href="http://test3.steelorbis.com/todays-daily-extract/?uid=%3CUSERID%3E" target="_blank">View web version</a> &nbsp; </div></td>
    </tr>
  </tbody>
</table>
<table style="font-family:helvetica,arial,sans-serif;color:#fff" bgcolor="#191919" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="font-size:26px" height="38">&nbsp;Daily Extract </td>
      <td align="right">&nbsp;<span tabindex="0" class="aBn" data-term="goog_1000455320"><span class="aQJ">Friday, 27 September 2013</span></span>&nbsp;&nbsp;</td>
    </tr>
  </tbody>
</table>
<table width="100%" style="font-family:helvetica,arial,sans-serif;margin-bottom:10px" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="background-color:#dedede;padding:10px"><a href="http://test3.steelorbis.com//steel-news/latest-news/german-metal-manufacturing-turnover-stable-in-july-compared-to-june-781886.htm" style="text-decoration:none;color:#323232" target="_blank">
        <h1 style="color:#c00000;font-size:18px;margin:0px;padding:0px;padding-bottom:15px;padding-top:15px">German metal manufacturing turnover stable in July compared to June</h1>
        </a></td>
    </tr>
    <tr>
      <td style="padding-top:15px" align="center"><a href="http://test3.steelorbis.com:80/SOAdManager/servlet/GetLinkServlet?region=437&amp;zone=53&amp;type=advanced&amp;bn=3375&amp;cp=10847&amp;ac=10135&amp;addr=http://www.google.com" target="_blank"><img src="" alt="" border="" height="80" width="100%"></a></td>
    </tr>
    <tr>
      <td><table style="font-family:helvetica,arial,sans-serif;border:1px solid #ccc;margin-bottom:10px" align="left" cellpadding="0" cellspacing="5" width="280">
          <tbody>
            <tr>
              <td><h1 style="color:#336699;font-size:18px">Market Developments</h1></td>
              <td align="right"><a href="#1415e846b775908e_bulletin_upper" title="back to top"><img src="" alt="back to top" border="0"></a></td>
            </tr>
            <tr>
              <td colspan="2" valign="top"><h2 style="color:#1e8316;font-size:15px">CIS</h2>
                <p style="font-size:13px;margin:0px;padding:0px;padding-bottom:10px;padding-top:10px"><a href="http://test3.steelorbis.com//steel-news/latest-news/russias-stainless-steel-imports-up-82-in-january_july-781326.htm" style="text-decoration:none" target="_blank">Russia’s stainless steel imports up 8.2% in January-July</a></p>
                <h2 style="color:#1e8316;font-size:15px">Americas</h2>
                <p style="font-size:13px;margin:0px;padding:0px;padding-bottom:10px;padding-top:10px"><a href="http://test3.steelorbis.com//steel-news/latest-news/colakoglu-ceo-us-ad-duty-investigation-on-turkish-rebar-is-without-basis-781218.htm" style="text-decoration:none" target="_blank">Colakoglu CEO: US AD duty investigation on Turkish rebar is without basis</a></p>
                <h2 style="color:#1e8316;font-size:15px">Asia &amp; Oceania</h2>
                <p style="font-size:13px;margin:0px;padding:0px;padding-bottom:10px;padding-top:10px"><a href="http://test3.steelorbis.com//steel-news/latest-news/kunming-steel-to-issue-short_term-bonds-worth-rmb-15-billion-781213.htm" style="text-decoration:none" target="_blank">Kunming Steel to issue short-term bonds worth RMB 1.5 billion</a></p>
                <h2 style="color:#1e8316;font-size:15px">Europe</h2>
                <p style="font-size:13px;margin:0px;padding:0px;padding-bottom:10px;padding-top:10px"><a href="http://test3.steelorbis.com//steel-news/latest-news/turkeys-passenger-car-sales-up-2516-percent-in-august-781289.htm" style="text-decoration:none" target="_blank">Turkey’s passenger car sales up 25.16 percent in August</a></p>
                <h2 style="color:#1e8316;font-size:15px">MENA</h2>
                <p style="font-size:13px;margin:0px;padding:0px;padding-bottom:10px;padding-top:10px"><a href="http://test3.steelorbis.com//steel-news/latest-news/arcelormittal-annaba-workers-to-go-on-strike-next-week-781230.htm" style="text-decoration:none" target="_blank">ArcelorMittal Annaba workers to go on strike next week</a></p></td>
            </tr>
          </tbody>
        </table>
        <div>
          <div class="adm">
            <div aria-label="Hide expanded content" data-tooltip="Hide expanded content" id="q_1415e9881676a939_7" class="ajR h4">
              <div class="ajT"></div>
            </div>
          </div>
          <div class="im">
            <table style="font-family:helvetica,arial,sans-serif;border:1px solid #cccccc" align="left" bgcolor="#ffffff" cellpadding="0" cellspacing="5" width="280" border="0">
              <tbody>
                <tr>
                  <td><h2 style="color:#336699;font-size:14px">SteelOrbis Business Directory</h2>
                    <p style="font-size:12px"> <img src="" align="left" border="0"> SteelOrbis provides its members with the largest Steel Company Directory listing, showing steel industry companies along with their complete profile information. This directory service will also let you share your company's detailed information with tens of thousands of steel companies all around the world in order to extend your trade partnership options. To update your company profile: Go to <a href="http://www.steelorbis.com" target="_blank">http://www.steelorbis.com</a> » log-in with your user-ID » click on the "My Company" button on the upper right corner » then select “edit my company”on the left side. </p>
                    <a href="http://test3.steelorbis.com//steel-companies/" style="text-decoration:none" target="_blank">
                    <h2 style="color:#06abcd;font-size:14px"> PROFESSIONAL NETWORK </h2>
                    <p style="font-size:12px"> The largest and the most comprehensive steel industry company listing available on the internet, with contact information of the people in different product groups, and the product variety in which they either sell or buy. Join now. </p>
                    </a> <a href="http://test3.steelorbis.com//steel-prices/steel-reference-prices/" style="text-decoration:none" target="_blank">
                    <h2 style="color:#06abcd;font-size:14px"> STEEL REFERENCE PRICES </h2>
                    <p style="font-size:12px"> Over 160 weekly steel reference price series derived from actual business transactions from North American, Northern &amp; Southern European, Turkish, and Asian steel markets. </p>
                    </a> <a href="http://test3.steelorbis.com//steel-prices/orbis-steel-index/" style="text-decoration:none" target="_blank">
                    <h2 style="color:#06abcd;font-size:14px"> ORBIS STEEL INDEX </h2>
                    <p style="font-size:12px"> Grasp a clear picture of global steel markets, follow seasonal steel market trends and confirm the level of your vendors’ raw materials prices, ferrous scrap prices and steel prices. </p>
                    </a> <a href="http://test3.steelorbis.com//steel-prices/steel-price-charts/" style="text-decoration:none" target="_blank">
                    <h2 style="color:#06abcd;font-size:14px"> STEEL PRICE CHARTS </h2>
                    <p style="font-size:12px"> Display historical steel price trends, make it easy to understand the performance of various steel products and markets over many years, reveal the steel price reactions to economic developments, and provide a reliable resource for strategy discussions. Compare the historical price trends of several different steel products and raw materials on the same graph. </p>
                    </a> <a href="http://test3.steelorbis.com//steel-prices/import-export-statistics/" style="text-decoration:none" target="_blank">
                    <h2 style="color:#06abcd;font-size:14px"> IMPORT &amp; EXPORT STATISTICS </h2>
                    <p style="font-size:12px"> Import and export data of over 50 different countries for various steel products. Get the data shown on different types of graphs and compare them. </p>
                    </a> <a href="http://test3.steelorbis.com//marketplace/welcome.do" style="text-decoration:none" target="_blank">
                    <h2 style="color:#06abcd;font-size:14px"> BUY &amp; SELL STEEL </h2>
                    <p style="font-size:12px"> Send and receive offers and inquiries directly to and from potential buyers/sellers located within the SteelOrbis company database. Save time, cost and expand your reach. </p>
                    </a> <a href="http://test3.steelorbis.com//steel-events/" style="text-decoration:none" target="_blank">
                    <h2 style="color:#06abcd;font-size:14px"> CONFERENCES &amp; EVENTS </h2>
                    <p style="font-size:12px"> Enhance your perception of market dynamics, network with key market players and find new potential business partners at leading conferences and events organized by SteelOrbis </p>
                    </a></td>
                  <td><img width="70" /></td>
                </tr>
                <tr>
                  <td colspan="2" style="padding-right:10px"><a href="http://www.facebook.com/group.php?v=wall&amp;gid=227494730309" title="Facebook" target="_blank"><img src="" style="margin-right:5px" alt="Facebook" border="0"></a>&nbsp; <a href="http://twitter.com/SteelOrbis" title="Twitter" target="_blank"><img src="" style="margin-right:5px" alt="Twitter" border="0"></a>&nbsp; <a href="http://test3.steelorbis.com/other-services/rss.htm" title="SteelOrbis RSS Feeds" target="_blank"><img src="" border="0"></a></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div></td>
    </tr>
  </tbody>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td><table style="font-family:arial;font-size:12px;color:#323232;" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td align="center"><br>
                <p><strong>This is the daily extract from <span color="#ff6600">SteelOrbis News</span>. Please visit <a href="http://www.steelorbis.com" style="color:#336699" target="_blank">www.steelorbis.com</a> for full coverage. For information about sponsoring opportunities please contact us at <a href="mailto:advertise@steelorbis.com" target="_blank">advertise@steelorbis.com</a>.</strong></p>
                <p><strong>Please tell us what you think, contact us at <a href="mailto:content@steelorbis.com" target="_blank">content@steelorbis.com</a></strong></p></td>
            </tr>
            <tr>
              <td height="10"></td>
            </tr>
          </tbody>
        </table>
        <table width="300" style="font-family:arial;font-size:11px;" align="left" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td valign="top" width="150"><p><img src="" align="absmiddle" border="0"><strong>Turkey</strong></p>
                <p>19 Mayis Mahallesi,<br>
                  Ataturk Caddesi<br>
                  Seref Yazgan Is Merkezi,<br>
                  No:72, Kat: 7, D: 18<br>
                  Kozyatagi - 34736<br>
                  Istanbul, Turkey<br>
                  Phone : <a href="tel:%2B90%20216%20468%2010%2050" value="+902164681050" target="_blank">+90 216 468 10 50</a><br>
                  Fax : <a href="tel:%2B90%20216%20386%2041%2008" value="+902163864108" target="_blank">+90 216 386 41 08</a><br>
                  <a href="mailto:sohdqtsales@steelorbis.com" style="color:#323232" target="_blank">sohdqtsales@steelorbis.com</a></p></td>
              <td valign="top" width="150"><p><img src="" align="absmiddle" border="0"><strong>USA</strong></p>
                <p>832 Camino Del Mar, Suite 2<br>
                  Del Mar, CA 92014<br>
                  Phone : <a href="tel:%2B1%20%28713%29%20589-6049" value="+17135896049" target="_blank">+1 (713) 589-6049</a><br>
                  Fax : <a href="tel:%2B1%20%28713%29%20589-6049" value="+17135896049" target="_blank">+1 (713) 589-6049</a></p></td>
            </tr>
          </tbody>
        </table>
        <table width="300" style="font-family:arial;font-size:11px;color:#636363;" align="left" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td valign="top" width="150"><p><img src="" align="absmiddle" border="0"><strong>China and Far East</strong></p>
                <p>Orbis Enterprise Management Consulting (Shanghai) Co., Ltd.<br>
                  No.129 Yan An Road (W),<br>
                  Shanghai Overseas Chinese Mansion, 19/F, Unit 1908<br>
                  No.129 Yan An Road (W). <br>
                  Shanghai, P.R. China, 200040<br>
                  Phone: <a href="tel:%2B86%20%2821%29%206327%201212" value="+862163271212" target="_blank">+86 (21) 6327 1212</a><br>
                  Fax: <a href="tel:%2B86%20%2821%29%205375%201291" value="+862153751291" target="_blank">+86 (21) 5375 1291</a></p></td>
              <td valign="top" width="150"><p><img src="" align="absmiddle" border="0"><strong>Italy</strong></p>
                <p>Borgo Pietro Wuhrer 23<br>
                  25128 Brescia<br>
                  Phone : <a href="tel:%2B39%20%28030%29%203762340" value="+390303762340" target="_blank">+39 (030) 3762340</a><br>
                  Fax : <a href="tel:%2B39%20%28030%29%203649719" value="+390303649719" target="_blank">+39 (030) 3649719</a><br>
                  <a href="mailto:soitaly@steelorbis.com" style="color:#323232" target="_blank">soitaly@steelorbis.com</a></p></td>
            </tr>
          </tbody>
        </table>
        <div style="clear:both"></div>
        <table style="font-family:arial;font-size:12px;color:#636363;" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td><p style="color:#336699" align="center"> <strong> <a href="http://www.steelorbis.com/company/companyApplication.do" style="color:#336699;text-decoration:none" target="_blank">- subscribe -</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="http://www.steelorbis.com/other-services/banner-and-magazine-advertising.htm" style="color:#336699;text-decoration:none" target="_blank">- advertise -</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="http://www.steelorbis.com" style="color:#336699;text-decoration:none" target="_blank">- homepage -</a> </strong> </p>
                <p align="center"></p>
                <p style="font-size:13px" align="center">If you'd rather not receive SteelOrbis bulletins, you can <a href="http://www.steelorbis.com/my-account/unsubscribe.do?email=okayaoglu@steelorbis.com;%20orkun_kayaoglu@hotmail.com" target="_blank">unsubscribe</a> immediately. </p>
                <strong>©&nbsp;Copyright SteelOrbis, all rights reserved.</strong>
                <p></p></td>
            </tr>
          </tbody>
        </table></td>
    </tr>
  </tbody>
</table>
</body>
</html>

Thanks, ckersoy - best of luck!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
CharlesWillson, 2 years ago
Redferret :

Hi there, is this the android Gmail app? If so It's probably related to the auto-fit feature, I've never seen these dots before though, could you post your code?

No dear!!! this is not android app. From last month gmail tries to give new look and new sorting to the gmail data. But If you have or getting any problem you can contact Gmail Support. From here you get full solution of your all queries.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098