Last active
October 3, 2019 16:20
-
-
Save fivedoor-gists/dc4dc8be0209988be8d98c8181b04c37 to your computer and use it in GitHub Desktop.
email-gmail_app-centering-fix
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| !-- METHOD 1 --> | |
| <style> | |
| u + .body { | |
| min-width:100vw; | |
| border: 1px solid #ffffff; | |
| } | |
| </style> | |
| <!-- Fixes IOS gmail but seems to break android gmail | |
| However: | |
| - ensuring media queries are in separate style block to main resets | |
| -Adding style="border: 1px solid #ffffff" into the body tag (can do via CSS) | |
| seems to solve this in some cases | |
| --> | |
| <!-- METHOD 2 --> | |
| <style> | |
| @media only screen and (max-width: 480px) { | |
| u + .body .wrapper { width:100% !important; width:100vw !important;} | |
| } | |
| </style> | |
| <body class="body" > | |
| <table class="wrapper"> | |
| <!-- add "body" class to body | |
| Add "wrapper" class to wrapper table | |
| unit vw => viewport width | |
| If needed Add 1px border to fix android gmail app issues | |
| --> | |
| <body class="body" style="border: 1px solid #ffffff"> | |
| <table class="wrapper"> | |
| <!-- Or you can add border via css for gmail only | |
| --> | |
| <style> | |
| u + .body { | |
| border: 1px solid #ffffff; | |
| } | |
| </style> | |
| <!-- | |
| https://litmus.com/community/discussions/6845-gmail-app-ios-and-inbox-ios-right-margin-issue-among-others#comment-13285 | |
| https://litmus.com/community/discussions/5913-new-gmail-app-not-respect-full-width | |
| https://litmus.com/community/discussions/7084-target-gmail-app-on-ios | |
| https://github.com/hteumeuleu/email-bugs/issues/57 | |
| --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment