CODEWITHSUNDEEP
htmlcssmedia-querieshtml-emailiphone-6
westwick
westwick

Reputation: 11

Centering responsive email in iphone 6

My responsive email is aligning to the left in iphone 6. I have align="center" on the containing tables and TD's. 320px width is specified in media queries with the main containing table having a width="100%".

@media only screen and (max-device-width: 480px)
table[class=threeHundred20], td[class=threeHundred20], tr[class=threeHundred20] {
width: 320px !important;
display: block !important;
}

I know that iphone 6 is higher than my specified 320 width which has created side gutters of space which I don't mind, but I need to center the main content. Is there any way to do this without changing my media queries to target different sizes? I want to avoid going down this route.

Upvotes: 1

Views: 5577

Answers (4)

Laurent Khoudja
Laurent Khoudja

Reputation: 333

This work perfectly for me : Add metas :

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta name="x-apple-disable-message-reformatting" />

Add media querie

@media only screen and (max-width: 480px){
.fullwidth,
.fullwidth tbody,
.fullwidth tbody > tr,
.fullwidth tbody > tr > td,
.fullwidth tbody > tr > th,
table[class=fullwidth],
table[class=fullwidth] tbody,
table[class=fullwidth] tbody > tr,
table[class=fullwidth] tbody > tr > td,
table[class=fullwidth] tbody > tr > th
td[class=main-border] {
    max-width: 100% !important;
    min-width: 100% !important;
    width: 100% !important;
    display: block !important; <!-- table, tbody, tr, td became blocs -->
    clear: both; <!-- to prevent floating ex: <table align="left"…> -->

    margin: 0 auto !important; <!-- to center the blocs -->
}

}

Don't forget tbody in you table an outlook styles to extra white space : Table wrapper + main container table :

<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;margin:0 auto;">
    <tbody>
    <tr>
        <td valign="middle" align="center">
            <table class="fullwidth" width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="borde-r-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;margin:0 auto;">
                <tbody>
                <tr>
                    <td style="font-size:5px;line-height:5px; height: 10px">&nbsp;</td> <!-- paddign & margin not supported by Outlook -->
                </tr>
                <tr>
                    <td valign="middle" align="center">
                        <table class="fullwidth" width="100%" cellspacing="0" cellpadding="0" border="0" align="center" style="borde-r-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;margin:0 auto;">
                            <tbody>
                            <tr>
                                <td>Col 1</td>
                                <td>Col 2</td>
                            </tr>
                        </tbody>
                    </td>
                </tr>
                <tr>
                    <td style="font-size:5px;line-height:5px; height: 10px">&nbsp;</td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
    </tbody>
</table>

Upvotes: 0

Bidstrup
Bidstrup

Reputation: 1617

I have always used this way, and it works on all devices and email clients

demo: https://jsfiddle.net/cL011mw3/

html:

<table width="100%">
<tr>
    <td>
        <table width="640" class="width320" align="center">
            <tr>
                <td bgcolor="#999999">
                    text
                </td>
            </tr>
        </table>
    </td>
</tr>

Css:

@media only screen and (max-width: 500px){
*[class].width320{
    width:320px !important
    }
}

Upvotes: 0

Gortonington
Gortonington

Reputation: 3587

Display:block can sometimes force a left align of content if the content is smaller then the parent container. Try instead using inline-block for display with text-align: center.

Upvotes: 2

user2072826
user2072826

Reputation: 536

due to some past experiences with

align:center;

I would recommend you use

margin-left: 50%;
margin-right: 50%;

instead.

Upvotes: 0

Related Questions