White space column in Mailbox app
limeybloke opened this issue · comments
Hello, I've come across a problem with a HTML email we've been building based on your framework. However I've also noticed this bug appears to be a problem with other emails I have received and wondered if you could shed any light on the subject. It doesn't occur with every email I get - some work which suggests there is a bug in your framework.
In short, when some responsive emails in the Mailbox App client on IOS, can be scrolled to the left revealing a white column. So the email doesn't in fact fit the 100% width. It's more like 110%.
I've attached a screenshot showing when I've scrolled left to reveal the White column.
Hi there, I cannot test it now but my guess is the issue might be coming from the wrapper #bodyCell e.t.c. I'll get back to you when I have more time to dig into it.
Hi Charles, Did you manage to get anywhere with this? I received an email from Shopify that didn't have this issue so it must be something in the width issue.
The issue might be from Mailbox, can you share a screenshot from the Shopify? a possible fix is adding padding 0 !important to the body tag but that makes the content shift to the left which is perfectly correct because we have it set to 100% but there is a padding issue from the right preventing it from full screen.
I have commit an update to fix the space issue. Here is the fix for Mailbox to centre the contents, add this code inside the media query
/* MOBILE STYLES */
@media only screen and (max-width: 480px){
body{width: 100% !important; width: 281px !important; margin:auto !important;}
......
The side effect is that it sets the maximum screen to that size but I want it full screen, so I won't scarifies that for Mailbox (not included in the update). For some reason, full screen doesn't work on Mailbox.
That's not really a fix though as you're just setting a fixed width to it. What I don't understand is how Shopify are making this work? Can you review one of their newsletter emails?
Yes it is fix, I checked Google newsletter and similar ones - they all have the fixed width for mobile. I'll look into it more when I have some time.
That's not worked. I've now got a white column down the left edge of the email when it opens.
I can still see padding on your html body, pull the latest commit and add the code above inside your media query body tag.