MR15
FIXED: Gmail App Not Respecting 100% Width
I've seen this issue in a few emails I've received recently and not sure if anyone has posted a fix for it so thought I'd share mine.
Sometimes the Gmail app refuses to respect the 100% width set on a table and instead just fits to the content. Even is the table already has width="100%" and style="width:100%;" set on it.
I'm not really sure what's causing it and can't seem to reproduce it easily, I actually ended up scraping someone elses code to reproduce the issue.
Anyway to fix this simply add style="min-width:100%;" to the offending table and it'll display as expected.
what I do is forcing Gmail app to display the desktop version so at least it's not all being squished. However this works only on non iOS devices (Android / Blackberry). On iPhone the email will be squished no matter what. Used to be OK until a year or so ago.
I guess this may be related to (Gmail App on Android tries to shrink your email with 'munged' classes )[http://mosaico.io/email-client-tricks/gmail-android-tries-to-shrink-your-email/]
Can you give my "simulator" a try to see if it does correclty emulate the behaviour of the Gmail App if you paste your email HTML?
https://github.com/bago/android-gmail-emulator
I saw this the other day, very cool Stefano.
My thinking is Gmail is stripping
widthbut notmin-widthIt doesn't really "strip" the width.
It adds a "munged" class to your table/td overriding any previous width under given conditions, as described in my blog post (it tries to do this changes and apply them only if the changes produced a narrower layout).
Ah yeah, my mistake, got ya,
So that just made me think
style="width:100% ! important;will also work and be a cleaner fix. unfortunately it doesn't work :(You can sort of see their thinking, trying to reduce fixed widths to fit the content better to mobile. It makes sense in theory. In practice however it breaks a lot of email.
This didn't work for me when applying the fix to the table tag. However applying it to the <td> after the opening table tag did work. So the following is a fix
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" >
<tr>
<td width="100%" style="border-top: 4px solid #998642; max-width:100%; min-width:100%; width:100%">