Hello! I'm having an specific issue in gmail on an IOS 10 phone, only in portrait. I just can't figure what can i do, i've tryed everything, actually my code works in yahoo, outlook and gmail correctly, but in this specific area it doesn't. any help?
my code:

        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="es">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <link rel="shortcut icon" href="favicon.ico">
    <title>Mercado Pago</title>

    <style>
        /* RESET */
        * {
            padding: 0;
            margin: 0;
            border: 0;
        }
        body {
            width: 100% !important;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            margin: 0;
            padding: 0;
            font-family:'Lato', 'Arial', sans-serif;
        }
        :link, :visited {
            text-decoration: none
        }
        ul, ol {
            list-style: none
        }
        h1, h2, h3, h4, h5, h6, pre, code {
            font-size: 1em;
        }
        ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input {
            margin: 0;
            padding: 0
        }
        a img, :link img, :visited img {
            border: none
        }

        /* FIN RESET */

        .padding {
            background-image: url(img/full.jpg);
            background-repeat: no-repeat !important;
            background-size: 100%;
            padding: 7px 0px 1px 10px;
        }

        .bold {
            font-weight: 500; 
            padding-bottom:5px;
            display: inline;
            line-height: 1.2;
            font-size: 13px !important;
        }

        .bordeIzq{
            border: 1px solid #cccccc; border-right: none; box-sizing: border-box;
        }

        @media only screen and (max-width: 560px) {

            .padding {
                padding: 1px 15px 1px 20px !important;
                background-image: url(img/mobile.jpg) !important;
                background-repeat: no-repeat !important;
                background-size: 100% !important;
                height: 218px !important;
            }
            .bold {
                padding-bottom: 5px!important;
                font-size: 14px!important;
                font-weight: 500!important;
                display: inline-block;
            }

            .conText{
                line-height: 1 !important;
                padding: 38px 20px 120px 12px !important;
            }

            .bordeIzq{ border-right: 1px solid #cccccc; border-bottom: 0; }

        }

    </style>
</head>

<body bgcolor="#ffffff">

  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="img/full.jpg" />
  </v:background>
  <![endif]-->

    <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" >
        <tr>
            <td align="center">

                <div style="display: inline-block; vertical-align: top; background: #f7f7f7; " class="bordeIzq" >
                    <table width="560" align="center" border="0" cellpadding="0" cellspacing="0" class="col" >
                        <tr>

                            <td width="260" height="102" valign="middle"  align="left" class="padding" background="img/full.jpg">
                                <p class="conText" style="font-size: 13px !important; font-family: 'lato', Arial, Helvetica, Sans-Serif; line-height:1.4 ;color: #666666; font-weight: 300;  padding:0 280px 5px 12px; margin:0;">
                                    <span class="bold">¿No te alcanza para pagar? ¡Comprá en cuotas sin tarjeta!</span>
                                    <a href="https://www.mercadolibre.com.ar/credits/consumer/enrollment/" title="Activá Mercado Crédito" target="_blank" style="color: #5581f6;text-decoration: none;">Activá Mercado Crédito</a> 
                                    sin cargo, elegilo como medio de pago, ¡y listo!
                                </p>
                            </td>
                        </tr>
                    </table>
                </div>

            </td>
        </tr>
    </table>


    <style>
        .padding {
            background-image: url(img/full.jpg);
            background-repeat: no-repeat !important;
            background-size: 100%;
            padding: 7px 0px 1px 10px;
        }

        .bold {
            font-weight: 500; 
            padding-bottom:5px;
            display: inline;
            line-height: 1.2;
            font-size: 13px !important;
        }
        .bordeIzq{
            border: 1px solid #cccccc; border-right: none; box-sizing: border-box;
        }


        @media only screen and (max-width: 560px) {

            .padding {
                padding: 1px 15px 1px 20px !important;
                background-image: url(img/mobile.jpg) !important;
                background-repeat: no-repeat !important;
                background-size: 100% !important;
            }

            .bold {
                padding-bottom: 5px!important;
                font-size: 14px!important;
                font-weight: 500!important;
                display: inline-block;
                line-height: 1 !important;
            }
            .conText{
                line-height: 1 !important;
                padding: 38px 20px 120px 12px !important;
            }

            .bordeIzq{border-right: 1px solid #cccccc; border-bottom: 0; display: block; }

            .col{width: 279px}

        }


    </style>

</body>
</html>