Clever Geek Handbook

Scale html email to fit on mobile screen without scrolling (android / iOS)

I am trying to create an html email that will scale to fit the cell phone screen, without the need to scroll horizontally. I've tried using ...

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

and setting the body width to 100% - but doesn't seem to work. Any other suggestions?

Here is my complete html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">.ExternalClass .ecxReadMsgBody{width:100%;}   .ExternalClass{width:100%;} body{margin: 0; padding: 0;} </style>

</head>
<body style="background: #dfdfe0; width:100%;">

    <table align="center" border="0" cellpadding="0" cellspacing="0" style="background: #dfdfe0;color: #37383a;margin: 0px;width: 100%;" width="100%">
        <tr>
            <td>
                <table border="0" cellpadding="0" cellspacing="0" width="576">

                    <tr>
                        <td colspan="2"></td>
                        <td colspan="34" style="background-color: red;" bgcolor="red"><img width="522" src="header2.png"></td>
                        <td colspan="2"></td>
                    </tr>

                    <tr> <!-- Start of the email grid -->
                        <td width="9"></td>
                        <td width="18" height="10" style="background-color: red; height: 10px;" bgcolor="red"></td>
                        <td width="27"></td> 
                        <td width="9"></td>
                        <td width="9"></td>
                        <td width="27"></td>
                        <td width="9"></td>
                        <td width="9"></td>
                        <td width="27"></td>
                        <td width="9"></td>
                        <td width="9"></td>
                        <td width="27"></td>
                        <td width="9"></td>
                        <td width="9"></td>
                        <td width="27"></td>
                        <td width="9"></td>
                        <td width="9"></td>
                        <td width="27"></td>
                        <td width="9"></td>
                        <td width="9"></td>
                        <td width="27"></td>
                        <td width="9"></td>
                        <td width="9"></td>
                        <td width="27"></td>
                        <td width="9"></td>
                        <td width="9"></td>
                        <td width="27"></td>
                        <td width="9"></td>
                        <td width="9"></td>
                        <td width="27"></td>
                        <td width="9"></td>
                        <td width="9"></td>
                        <td width="27"></td>
                        <td width="9"></td>
                        <td width="9"></td>
                        <td width="27"></td>
                        <td width="18" style="background-color: red;" bgcolor="red"></td>
                        <td width="9"></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Many thanks!

EDIT

Note that I have also reduced the number of columns to 5 and I still get the same result

+3


source to share


2 answers


Your table width is in pixels (576 pixels), which is larger than your phone screen. You can use media query (responsive design) to disable or resize the desktop version to fit the mobile screen, otherwise you need to go with fluid design .



The limitation is that media queries don't work in Gmail because you can't embed them. Fluid really only works with single column layouts.

+2


source 


<table border="0" cellpadding="0" cellspacing="0" width="100%">


You have specified the absolute width in the table. Change it to 100% width.

0


source






More articles:


All Articles