Android text-align:center not working

I am having an issue getting my responsive email displaying correctly on my Galaxy S4 (Android 4.2.2). Text-align:center is not working on a specific part of my code (below), but is working in other areas.

http://bangcampaign.com.au/BANG/EDM-responsive/ss.jpg

This is the media query I am using:

@media screen and (max-width:480px) {
     table[class="content-body"], td[class="content-body"] {
        width:100% !important;
        text-align:center !important;
     }
}

And the HTML:

<td class="content-body" width="43%" valign="top" >
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td height="53"></td>
                                </tr>
                                <tr>
                                    <td><img src="http://bangcampaign.com.au/BANG/EDM-responsive/images/title1.png" width="197" height="17" alt="Our new website is born!" style="border: none;"></td>
                                </tr>
                                <tr>
                                    <td height="30"></td>
                                </tr>
                                <tr>
                                    <td class="p" style="font-family: Arial, Helvetica, sans-serif;font-size: 14px;line-height: 23px;">Weighing in at zero kgs this piece of digital mastery is just waiting to be adored from your laptop, smart phone or iPad. With layers of personality and bursting with character, you’ll be up all night with this little bugger.</td>
                                </tr>
                                <tr>
                                    <td height="30">&nbsp;</td>
                                </tr>
                                <tr>
                                    <td><a href="#" target="_blank"><img src="http://bangcampaign.com.au/BANG/EDM-responsive/images/visit.png" width="60" height="60" alt="Visit our new website" style="border: none;"></a></td>
                                </tr>
                                <tr class="mobile-show" style="display:none;">
                                    <td height="30"></td>
                                </tr>
    </table>
</td>
roshodgekiss roshodgekiss, 3 years ago

Hi there daz89, quick one here - could you kindly test if the media query is working at all in the Samsung Galaxy's email client? I assume you're using the default one here, which we've had mixed reports about as far as media query support goes.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
daz89, 3 years ago

Hey Ros,

Yes the media query is working in the native email client although I guess not as well as the iOS client.

The solution was just to apply the class

content-body

to each offending cell. In other clients applying it to the parent cell sufficed.

roshodgekiss roshodgekiss, 3 years ago

Nice one - thanks for sharing the solution with us! I'm glad that's working now :D


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