I have a responsive email layout where some elements stretch the entire width of the viewport, whatever that may be.
In Android (native mail and Gmail app on 4.4 at least) There appears to be a ~10px padding on either side. Is there any property or trick for negating this?
(I feel like this question should have been asked somewhere already, but searches provide only completely unrelated HTML email margin issues, so sorry if this is a duplicate).
Tried
Cancelling out the body margin. This affected the layout but did not fix the issue. The result of the following code simply removed the padding on the left but doubled the padding on the right in the native app.
html, body{ padding:0 !important; margin:0 !important; width:100% !important; } div[style*="margin: 16px 0"] { margin:0 !important; font-size:100% !important; width:100% !important; } No change in the Gmail app.
More insights
It seems the body remains the same width in the viewport regardless of width settings. If you set the width to 1000px, the email is shrunk to fit in the area with the margin on either side. The margin can be cancelled out using margin:0 on the body but the body stays the same size, resulting in the extra space appearing on the right.
I believe that the client is programmatically resizing the email to fit in a given width. The only way around this is likely to somehow "trick" the client. Nothing seems to have worked yet...
1 Answers
Answers 1
The problem is simply margins, the Android 4.4 email client is applying a margin value on all sides (but its not actually visible on the right side), so even before your email message is rendered, its messed with overall viewport already.
You can normalize it, via the below block.
body { margin:0 !important; } div[style*="margin: 16px 0"] { margin:0 !important; font-size:100% !important; } https://blog.jmwhite.co.uk/2015/09/19/revealing-why-emails-appear-off-centre-in-android-4-4-kitkat/
0 comments:
Post a Comment