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

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