GM7
A Fix for the iOS Gmail and Inbox Right Space
Between Mark Robbins and a few other people I've managed to get this working and not affecting the other clients:
This goes inside your 480 media query.
u + .body .full-wrap {
width:100% !important;
width:100vw !important;
}
As you may be able to work out from the above, my body tag has a class of 'body' and my inner wrapping table has a class of 'full-wrap'.
I've been pulling my hair for a while with this one - enjoy! :D
P.s - let me know if it worked for you??? And don't forget to upmark if it helped you so others can find!
I don't recall in what thread I found this, but if you add <meta name="x-apple-disable-message-reformatting" /> to your head tag, it should solve the issue. Worked like a charm for me!
Wow Jennifer! I never found this anywhere I'd be interested in the source but I suppose some googling should solve that! :)
Thanks for you input on this, hopefully this works across the board and doesn't affect any other clients for iOS :D
You're welcome, Gordon. I haven't seen any issues with other iOS clients, but if you notice anything off, please let me know!
I will do when I get round to testing it :D Thanks again!!
Take care,
G
did you maybe found it in the render js? from iCloud?
This fixes the right margin on gmap app for iphone. The only issue is that it scales down the entire email in Nexus 5X Gmail Android 6.
Hi,
To solve this issue i added this css :
@media only screen and (max-width:320px) {
.fixiOS {
width: 320px!important
}
}
@media only screen and (min-width:321px) and (max-width:415px) {
.fixiOS {
width: 414px!important
}
}
And in the main table of 640px width :
<div class="fixiOS" style="width:320px; height:1px"> </div>
This will constrain to keep the with of the screen for iPhone5, 6, 7, 8 and X
I did not find a simpler fix
I hope it will help you.
Mk
Hey Mickael!
Nice one! The fix you've proposed should work well for a fixed width responsive template! :D
My example above is for fully fluid only, never thought about that, thanks for your input!
Take care,
G
confirmed solution, we are using this approach since a year with great success
Works great! But causes the email to scale to the height of the viewport in Nexus 5x Gmail Android 6.
This seems to fix the right space in iOS Gmail and Inbox while not affecting Nexus 5X Gmail Android 6. (Add a class of 'full-wrap' to the inner wrapping table.)
@media only screen and (max-width: 480px) {
/* Targets Gmail */
u ~ div .full-wrap {min-width: 100vw;}
/* Targets Gmail on Android */
div > u ~ div .full-wrap {min-width: 100%;}
}
Hi Gordon,
I was wondering if you could help me with the above, I believe I'm having the same problem. My email design works fine on all browsers and mobiles but anything on iOS 11. Its pushing all the html to one side of the screen, is that the same problem?
Hey Simon,
Yeah so it adds a margin on the right hand side, pushing the creative to the left. Only an issue on iOS inbox/gmail apps.
This is the fix :)
Hi Gordon,
So this is my code. The creative is already pushed to the left, so it actually needs to be pushed to the right? Could you have a look at the code and tell me where I should put the code that you posted above.
Thanks a lot.
https://litmus.com/builder/documents/1869900
Apologies Simon! I've just seen this and the link is now old and broken :(
I'd try Jennifer's new solve above first, if that doesn't work just shoot another link and I'll have a browse, it's really easy once you know how :)
Cheers,
G