HTML Email does not show properly in mobile devices

Question

Im trying to make a simple HTML Email. It is diplayed OK the 90% of the times. When I use Gmail APP to see the e-mail in portrait orientation, the it is not shown properly (gmail via browser works ok). Its ok in landscape, but no in portrait. Searching for the solution, i realized that the problem is that the font-size is resized and adjusted to the screen.

Anyone knows how to force the device to preserve the original font size? If the email's width do not fit with the screen's width is not a problem. I just want to preserve the original style of teh email even if the email is broader than the screen.

This is how the email is supposed to be shown http://i.imgur.com/MfGT5yC.png

And this is how is shown with gmail app in portrait orientation http://img208.imageshack.us/img208/8969/so2b.png

Thanks in advance!!

EDIT:

here is the main code:

    <table border="0" align="center" cellspacing="10" style="font-family: Calibri" width="600px">

        <!--   ****************** H E A D E R ****************** -->        
        <tr>
            <td colspan="2" style="width:600px;height:81">
                <img style="width:600px;" src="http://cimalab.com/folleto_digital/2013_abril_mayo_junio/images/cabecera_principal.png">
            </td>
        </tr>           
        <!--   ****************** H E A D E R ****************** -->


        <!--   ****************** S U B - H E A D E R ****************** -->
        <tr>
            <td style="width:293px;">
                <img style="width:293px;" src="http://cimalab.com/folleto_digital/2013_abril_mayo_junio/images/cab1.png">
            </td> 
            <td style="width:293px;">
                <img style="width:293px;" src="http://cimalab.com/folleto_digital/2013_abril_mayo_junio/images/cab2.png">
            </td>
        </tr>
        <!--   ****************** S U B - H E A D E R ****************** -->


        <tr>
            <td colspan="2" width="600px" height="3px;">
                <img style="width:600px;height:2px" src="http://cimalab.com/folleto_digital/2013_abril_mayo_junio/images/linea1.png">
            </td>
        </tr>

        <!--   ****************** NEWS ****************** -->
        <tr>
            <td valign="top" style="width:293px;">
                <img style="width:293px;" src="http://cimalab.com/folleto_digital/2013_abril_mayo_junio/images/not1.png">
            </td> 
            <td valign="top" style="width:293px;">
                <div valign="top" style="height:190px;">
                    <div style="height:160px;">
                        <!-- <img style="width:293px;" src="http://cimalab.com/folleto_digital/2013_abril_mayo_junio/images/linea_titulo1.png"> -->
                        <div id="dTitulo" align="justify" style="font-size:16px;">
                            <b>sadsa asdfsafsd asdf asdfsafsd asdf asdfsafsd asdf asdfsafsd asdf asdfsafsd asdf asdfsafsd asdf dsadsadasd sadasdasdasdasd </b></p>
                        </div>          
                        <div id="dTexto" align="justify" style="font-size:14px;margin-top:5px;">
                            texto texto texto texto texto texto texto texto texto texto texto texto 
                        </div>
                    </div>

                    <div id="dLeerMas" valign="bottom" style="color:#2C89E3; text-align:right;">
                        <p>
                            <b><i>Leer más..</i></b>
                        </p>
                    </div>
                </div>      
            </td>
        </tr>
        <!--   ****************** NEWS ****************** -->

    </table>

some code would be nice so we can reproduce, check and test. Are you using tables with a width in percentages? — Matthias Wegtun, Jun 10 '13 at 11:09
table: width 600px. I tried with percent, but the style was bit messy. Do you think that percent can solve the problem? — Redder, Jun 10 '13 at 11:27

score 0 · Answer 1 · answered Jun 10 '13 at 11:29

0

You are using a static width that's why on mobile phone app it will be too large for the screen. Try using percentages and test the outcome. Making e-mails look good is very hard since it's different than coding responsive websites. Good Luck! test and have patience.

Here is a usefull link about HTML email http://hub.tutsplus.com/tutorials/what-you-should-know-about-html-email--webdesign-12908

answered Jun 10 '13 at 11:29

Matthias Wegtun

1,221
9
13

Thanks Matthias, Im going to try with percents. I will come back with the results :) – Redder Jun 10 '13 at 11:31
Good Luck Redder, It took myself about 20 hours to create a e-mail template that was presentable for cross devices and browsers. Take your time :) – Matthias Wegtun Jun 10 '13 at 11:38

HTML Email does not show properly in mobile devices

1 Answers1