Mail appear fine on Gmail(desktop), but not on Gmail mobile app.

Email is appearing fine on desktop in Gmail, but it is completely breaking on Gmail mobile app. We also not adding any responsiveness in emails for now.
I am new to email development. Tried many things, but unable to find exact reason what thing is causing this issue.

Please help. Thank you in advance.

Here is my HTML---


<html>
<body style="background-color: #F2F2F2">
<table align="center" cellpadding="0" cellspacing="0" border="0" width="720">
    <tbody>
    <tr>
        <td width="720" align="right" colspan="3" style="padding-top: 15px; padding-bottom: 20px; background-color: #F2F2F2">
            <div style="display: inline; padding-right: 10px; border-right: 1px solid #000000"><span style="font-family: helvetica; font-size: 11px; line-height: 13px;"><a href="#" style="color: #050500;">View</a> in a browser</span></div>
            <div style="display: inline; margin-left: 10px;"><span style="font-family: helvetica; font-size: 11px; line-height: 13px;"><a href="#" style="color: #050500;">Unsubscribe</a> from this</span></div>
        </td>
    </tr>
    <tr>
        <td width="20" style="background-color: #FFFFFF;"></td>
        <td width="680">
<table width="680" border="0" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
        <td width="290" style="padding-top: 40px; padding-bottom: 40px; background-color: #FFFFFF">
            &nbsp;
        </td>
        <td width="100" align="left" style="padding-top: 40px; padding-bottom: 40px; background-color: #FFFFFF">
            <a href="#" style="color: #050500"><img src="http://dummyimage.com/100x42/000/fff.jpg" alt="Logo" style="width: 100px;"></a>
        </td>
        <td align="right" width="290" style="vertical-align: bottom; padding-top: 40px; padding-bottom: 40px; background-color: #FFFFFF">
            <span style="font-family: helvetica; font-size: 15px; line-height: 18px;"><a href="#" style="text-decoration: none; color: #050500"><b>Shop here</b></a></span>
        </td>
    </tr>
    </tbody>
</table>

<table style=" width: 680px; background-color: #FFFFFF;" cellpadding="0" cellspacing="0" border="0">
    <tbody>
    <tr>
        <td colspan="3" style="text-align: center; height: 80px; padding-bottom: 40px;">
            <img src="http://dummyimage.com/680x130/000/fff.jpg" alt="Banner Image" width="680px">
        </td>
    </tr>
    <tr>
        <td style="width: 280px; vertical-align: top;">
            <table width="280" cellpadding="0" cellspacing="0" border="0">
                <tbody>
                <tr>
                    <td align="left" colspan="2" style="padding-bottom: 10px;">
                        <span style="font-family: helvetica; font-size: 20px; line-height: 20px; color: #050500">Somethimg</span>
                    </td>
                </tr>
                <tr>
                    <td align="left">
                        <span style="font-family: helvetica; font-size: 20px; line-height: 20px; color: #050500">Something</span>
                    </td>
                </tr>
                <tr>
                    <td align="left" style="padding-top: 18px;">
                        <span style="font-family: helvetica; font-size: 15px; line-height: 20px; color: #050500"><b>Amount</b></span>
                    </td>
                    <td align="right" style="padding-top: 18px;">
                        <span style="font-family: helvetica; font-size: 15px; line-height: 20px; color: #050500">123123132231323</span>
                    </td>
                </tr>
                <tr>
                    <td align="left" style=" padding-top: 10px;">
                        <span style="font-family: helvetica; font-size: 15px; line-height: 20px; color: #DA524E;"><b>Amount 2</b></span>
                    </td>
                    <td align="right" style=" padding-top: 10px;">
                        <span style="font-family: helvetica; font-size: 15px; line-height: 20px; color: #DA524E;">12334354354
                            35435453</span>
                    </td>
                </tr>
                <tr>
                    <td align="left" colspan="2" style="padding-top: 13px;">
                        <span style="font-family: helvetica; font-size: 13px; line-height: 16px; color: #DA524E">description is here description is here description is here</span>
                    </td>
                </tr>
                <tr>
                    <td align="left" colspan="2" style="padding-top: 30px;">
                        <div style="font-family: helvetica; font-size: 15px; line-height: 21px; color: #050500; margin-bottom: 6px;">
                            <b>Heading</b></div>
                        <div style="font-family: helvetica; font-size: 15px; line-height: 21px; color: #050500">
                            Line 1 Line 1 Line 1
                        </div>
                        <div style="font-family: helvetica; font-size: 15px; line-height: 21px; color: #050500">
                            Line 2 Line 2 Line 2 
                        </div>
                        <div style="font-family: helvetica; font-size: 15px; line-height: 21px; color: #050500">
                            Line 3 Line 2 Line 2
                        </div>
                        <div style="font-family: helvetica; font-size: 15px; line-height: 21px; color: #050500">
                            Line 4 Line 2 Line 2
                        </div>
                        <div style="font-family: helvetica; font-size: 15px; line-height: 21px; color: #050500">
                            Line 5 Line 2 Line 2
                        </div>

                    </td>
                </tr>
                </tbody>
            </table>
        </td>
        <td style="width: 20px">
        </td>
        <td style="width: 380px; vertical-align: top;">
            <table cellpadding="0" cellspacing="0" border="0">
                <tbody>
                <tr>
                    <td align="left" colspan="2" style="padding-top: 67px;">
                        <div style="font-family: helvetica; font-size: 15px; line-height: 21px; color: #050500; margin-bottom: 6px;"><b>Heading</b></div>
                        <div style="font-family: helvetica; font-size: 15px; line-height: 21px; color: #050500">
                            Line 1 Line 1 Line 1
                        </div>
                        <div style="font-family: helvetica; font-size: 15px; line-height: 21px; color: #050500">
                            Line 2 Line 2 Line 2 
                        </div>
                        <div style="font-family: helvetica; font-size: 15px; line-height: 21px; color: #050500">
                            Line 3 Line 2 Line 2
                        </div>
                        <div style="font-family: helvetica; font-size: 15px; line-height: 21px; color: #050500">
                            Line 4 Line 2 Line 2
                        </div>
                        <div style="font-family: helvetica; font-size: 15px; line-height: 21px; color: #050500">
                            Line 5 Line 2 Line 2
                        </div>
                    </td>
                </tr>
                <tr>
                    <td align="left" colspan="2" style="padding-top: 32px;">
                        <div style="font-family: helvetica; font-size: 15px; line-height: 21px; color: #050500; margin-bottom: 6px;"><b>Heading</b></div>
                         <div style="font-family: helvetica; font-size: 15px; line-height: 21px; color: #050500">
                            Line 1 Line 1 Line 1
                        </div>
                        <div style="font-family: helvetica; font-size: 15px; line-height: 21px; color: #050500">
                            Line 2 Line 2 Line 2 
                        </div>
                        <div style="font-family: helvetica; font-size: 15px; line-height: 21px; color: #050500">
                            Line 3 Line 2 Line 2
                        </div>
                        <div style="font-family: helvetica; font-size: 15px; line-height: 21px; color: #050500">
                            Line 4 Line 2 Line 2
                        </div>
                        <div style="font-family: helvetica; font-size: 15px; line-height: 21px; color: #050500">
                            Line 5 Line 2 Line 2
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr>
        <td colspan="3">
            <hr
                style="margin-top: 30px; margin-bottom: 30px; border: none; border-top-width: 1px; border-top-style: solid; border-top-color: #E5E5E5;">
        </td>
    </tr>
    </tbody>
</table>

</td>
<td width="20" style="background-color: #FFFFFF; vertical-align: top;"></td>
</tr>
<tr>
    <td align="right" colspan="3" style="padding-top: 15px; padding-bottom: 20px; background-color: #F2F2F2">
    </td>
</tr>
</tbody>
</table>
</body>
</html>
roshodgekiss roshodgekiss, 3 years ago

Hi there rohit.verma, would you be able to post a screenshot of the issue? I'll take a guess now that it's to do with Gmail's auto-fit and zoom; using the meta tag may also help:

<meta name="viewport" content="width=device-width, initial-scale=1"/>

Let us know how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free