New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hybrid, responsive and fluid emails are not centered in Gmail on iOS #89

Closed
volodymyrpekh opened this Issue Dec 19, 2016 · 25 comments

Comments

6 participants
@volodymyrpekh

volodymyrpekh commented Dec 19, 2016

2016-12-19 18 13


2016-12-19 18 14 1


2016-12-19 18 14




It looks like we need something like this only for Gmail. Any ideas/suggestions?

@TedGoas TedGoas self-assigned this Dec 20, 2016

@TedGoas TedGoas added the bug label Dec 20, 2016

@TedGoas

This comment has been minimized.

Show comment
Hide comment
@TedGoas

TedGoas Dec 20, 2016

Owner

@volodymyrpekh Thanks, I hadn't seen this before, I'll look into it. Do you see this bug on any other iPhone? Or just the iPhone SE?

Owner

TedGoas commented Dec 20, 2016

@volodymyrpekh Thanks, I hadn't seen this before, I'll look into it. Do you see this bug on any other iPhone? Or just the iPhone SE?

@volodymyrpekh

This comment has been minimized.

Show comment
Hide comment
@volodymyrpekh

volodymyrpekh Dec 20, 2016

@TedGoas Same on iPhone 5S (Gmail). I will do tests and screenshots for iPhone 6-7+ tomorrow.

volodymyrpekh commented Dec 20, 2016

@TedGoas Same on iPhone 5S (Gmail). I will do tests and screenshots for iPhone 6-7+ tomorrow.

@volodymyrpekh volodymyrpekh changed the title from Hybrid email is not centered in Gmail on iPhone SE (iOS 10.2) to Hybrid email is not centered in Gmail on iPhone SE, 5S (iOS 10.2) Dec 20, 2016

@philesq

This comment has been minimized.

Show comment
Hide comment
@philesq

philesq Dec 21, 2016

Also experiencing a similar issue. The template seems to be aligning left in gmail app, testing on iphone 7.

philesq commented Dec 21, 2016

Also experiencing a similar issue. The template seems to be aligning left in gmail app, testing on iphone 7.

@volodymyrpekh volodymyrpekh changed the title from Hybrid email is not centered in Gmail on iPhone SE, 5S (iOS 10.2) to Hybrid email is not centered in Gmail on iPhone SE, 5S, 7 (iOS 10.2) Dec 21, 2016

@TedGoas

This comment has been minimized.

Show comment
Hide comment
@TedGoas

TedGoas Dec 23, 2016

Owner

This issue appears to impact the Responsive and Fluid templates as well. In browsing random HTML emails in my inbox, some emails go edge to edge, so it's doesn't seem to be an issue in the Gmail app.

Owner

TedGoas commented Dec 23, 2016

This issue appears to impact the Responsive and Fluid templates as well. In browsing random HTML emails in my inbox, some emails go edge to edge, so it's doesn't seem to be an issue in the Gmail app.

@volodymyrpekh volodymyrpekh changed the title from Hybrid email is not centered in Gmail on iPhone SE, 5S, 7 (iOS 10.2) to Hybrid, Responsive and Fluid emails are not centered in Gmail on iOS Dec 25, 2016

@volodymyrpekh volodymyrpekh changed the title from Hybrid, Responsive and Fluid emails are not centered in Gmail on iOS to Hybrid, responsive and fluid emails are not centered in Gmail on iOS Dec 25, 2016

@TedGoas

This comment has been minimized.

Show comment
Hide comment
@TedGoas

TedGoas Dec 29, 2016

Owner

Confirmed with Gmail team this issue is only on iOS (both Gmail and Inbox app). Android is fine.

Owner

TedGoas commented Dec 29, 2016

Confirmed with Gmail team this issue is only on iOS (both Gmail and Inbox app). Android is fine.

TedGoas added a commit that referenced this issue Dec 29, 2016

@TedGoas

This comment has been minimized.

Show comment
Hide comment
@TedGoas

TedGoas Dec 29, 2016

Owner

From what I hear, this is a known bug that Gmail is working on, though no ETA.

Until then, here is a hack that should get us by:

  1. Add .email-container class to the wrapping <table> or <div>.

  2. Add a media query for each iPhone size you'd like to support, like so:

     @media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
         .email-container {
             min-width: 375px !important;
         }
     }
    

This basically forces the layout to the full-width of the device it's targeting. Since it relies on pixels, it's not a friendly or scalable solution, but it seems to work. Assuming Gmail eventually fixes this iOS bug, I look forward to removing it.

Code and comments appear at line 88 of Hybrid template.

Owner

TedGoas commented Dec 29, 2016

From what I hear, this is a known bug that Gmail is working on, though no ETA.

Until then, here is a hack that should get us by:

  1. Add .email-container class to the wrapping <table> or <div>.

  2. Add a media query for each iPhone size you'd like to support, like so:

     @media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
         .email-container {
             min-width: 375px !important;
         }
     }
    

This basically forces the layout to the full-width of the device it's targeting. Since it relies on pixels, it's not a friendly or scalable solution, but it seems to work. Assuming Gmail eventually fixes this iOS bug, I look forward to removing it.

Code and comments appear at line 88 of Hybrid template.

@volodymyrpekh

This comment has been minimized.

Show comment
Hide comment
@volodymyrpekh

volodymyrpekh Jan 1, 2017

Thanks @TedGoas for such a quick solution! Happy New Year and all the best in 2017!

volodymyrpekh commented Jan 1, 2017

Thanks @TedGoas for such a quick solution! Happy New Year and all the best in 2017!

@TedGoas TedGoas closed this Jan 2, 2017

@stephangriesel

This comment has been minimized.

Show comment
Hide comment
@stephangriesel

stephangriesel Jun 9, 2017

i had this issue earlier this week. thanks!

stephangriesel commented Jun 9, 2017

i had this issue earlier this week. thanks!

@hitimes

This comment has been minimized.

Show comment
Hide comment
@hitimes

hitimes Jan 10, 2018

I still see a small gap on the right hand size of about 10px or so on Gmail only - iPhone 7plus. Yahoo, same device looks good.

hitimes commented Jan 10, 2018

I still see a small gap on the right hand size of about 10px or so on Gmail only - iPhone 7plus. Yahoo, same device looks good.

@hitimes

This comment has been minimized.

Show comment
Hide comment
@hitimes

hitimes commented Jan 10, 2018

screen_shot_2018-01-10_at_2_28_50_pm

@TedGoas

This comment has been minimized.

Show comment
Hide comment
@TedGoas

TedGoas Jan 10, 2018

Owner

@hitimes Jah. as you may be able to tell from this thread, I never did find a solution that fixes both iOS and Android. I haven't thought about it more since and would welcome the help if you're willing and able! Lemme know and I can re-open this.

Owner

TedGoas commented Jan 10, 2018

@hitimes Jah. as you may be able to tell from this thread, I never did find a solution that fixes both iOS and Android. I haven't thought about it more since and would welcome the help if you're willing and able! Lemme know and I can re-open this.

@hitimes

This comment has been minimized.

Show comment
Hide comment
@hitimes

hitimes Jan 10, 2018

I'm working on it, I'll post it here if I find a solution in the next few days.

hitimes commented Jan 10, 2018

I'm working on it, I'll post it here if I find a solution in the next few days.

@dariobros

This comment has been minimized.

Show comment
Hide comment
@dariobros

dariobros Jan 10, 2018

this was fixed with the code added in style element, plus I added the .email-container class to the main tables (divs if need be), and it works fine:

@media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
/* iPhone 5 and 5S */
.email-container {
min-width: 320px !important;
}
}

@media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
/* iPhone 6 and 6+ */
.email-container {
min-width: 375px !important;
}
}

dariobros commented Jan 10, 2018

this was fixed with the code added in style element, plus I added the .email-container class to the main tables (divs if need be), and it works fine:

@media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
/* iPhone 5 and 5S */
.email-container {
min-width: 320px !important;
}
}

@media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
/* iPhone 6 and 6+ */
.email-container {
min-width: 375px !important;
}
}

@TedGoas TedGoas reopened this Jan 11, 2018

@TedGoas TedGoas added Help Wanted! and removed bug labels Jan 11, 2018

@hitimes

This comment has been minimized.

Show comment
Hide comment
@hitimes

hitimes Jan 12, 2018

I still see the problem @dariobros. I will continue to work on it to get it fixed. Thanks for reopening Ted!

hitimes commented Jan 12, 2018

I still see the problem @dariobros. I will continue to work on it to get it fixed. Thanks for reopening Ted!

@dariobros

This comment has been minimized.

Show comment
Hide comment
@dariobros

dariobros Jan 12, 2018

hint: what i have done is I stripped my email to basic table/div and started testing the margins, once you crack the main element you can start adding the rest as the chances are that something may stop it from resizing. if you want i can email you my html code and you can compare/test it.

dariobros commented Jan 12, 2018

hint: what i have done is I stripped my email to basic table/div and started testing the margins, once you crack the main element you can start adding the rest as the chances are that something may stop it from resizing. if you want i can email you my html code and you can compare/test it.

@hitimes

This comment has been minimized.

Show comment
Hide comment
@hitimes

hitimes Jan 16, 2018

Sure thing, I'd love to see your solution to it.

I'm adding a navigation to my version as well, now gotta work the breaking points on that as well.

I'm no pro coder, just trying to figure it all out for this series of emails I'm doing at my job.

hitimes commented Jan 16, 2018

Sure thing, I'd love to see your solution to it.

I'm adding a navigation to my version as well, now gotta work the breaking points on that as well.

I'm no pro coder, just trying to figure it all out for this series of emails I'm doing at my job.

@dariobros

This comment has been minimized.

Show comment
Hide comment
@dariobros

dariobros Jan 17, 2018

the solution given above worked for me.

  1. during testing remove all elements as they may cause conflicts, and start with 1 simple black table element
  2. add the class .email-container to all tables (or the main ones) and add the css code above and see what happens.
    or maybe this code below will help you solve the problem: check the code of this email:

code >>>> https://goo.gl/hUwhkR
image of my app >>>> https://imgsafe.org/image/e956f2c115

dariobros commented Jan 17, 2018

the solution given above worked for me.

  1. during testing remove all elements as they may cause conflicts, and start with 1 simple black table element
  2. add the class .email-container to all tables (or the main ones) and add the css code above and see what happens.
    or maybe this code below will help you solve the problem: check the code of this email:

code >>>> https://goo.gl/hUwhkR
image of my app >>>> https://imgsafe.org/image/e956f2c115

@TedGoas

This comment has been minimized.

Show comment
Hide comment
@TedGoas

TedGoas Jan 18, 2018

Owner

@dariobros Your original solution included the block below. The original intent was to patch a few iPhones, but I hoped this wouldn't become a long-term solution to cover all phones by including a media query for each. Is this how you intend it to work?

/* What it does: Removes right gutter in Gmail iOS app: #89 /
/ Create one of these media queries for each additional viewport size you'd like to fix /
/ Thanks to Eric Lepetit (@ericlepetitsf) for help troubleshooting */

@media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
/* iPhone 5 and 5S */
.email-container {
min-width: 320px !important;
}
}

/* What it does: Removes right gutter in Gmail iOS app: #89 /
/ Create one of these media queries for each additional viewport size you'd like to fix /
/ Thanks to Eric Lepetit (@ericlepetitsf) for help troubleshooting */

@media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
/* iPhone 6 and 6+ */
.email-container {
min-width: 375px !important;
}
}
</style>
Owner

TedGoas commented Jan 18, 2018

@dariobros Your original solution included the block below. The original intent was to patch a few iPhones, but I hoped this wouldn't become a long-term solution to cover all phones by including a media query for each. Is this how you intend it to work?

/* What it does: Removes right gutter in Gmail iOS app: #89 /
/ Create one of these media queries for each additional viewport size you'd like to fix /
/ Thanks to Eric Lepetit (@ericlepetitsf) for help troubleshooting */

@media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
/* iPhone 5 and 5S */
.email-container {
min-width: 320px !important;
}
}

/* What it does: Removes right gutter in Gmail iOS app: #89 /
/ Create one of these media queries for each additional viewport size you'd like to fix /
/ Thanks to Eric Lepetit (@ericlepetitsf) for help troubleshooting */

@media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
/* iPhone 6 and 6+ */
.email-container {
min-width: 375px !important;
}
}
</style>
@dariobros

This comment has been minimized.

Show comment
Hide comment
@dariobros

dariobros Jan 18, 2018

I fully agree. this is the solution that temporary solves the problem, until the Inbox app (if ever) gets an update. I know it's not ideal, but with some type of templates it simply solves the problem. Email code, in general is a massive junk of "fixes" when one really wants the final design to look consistent. so here's just another one :)

dariobros commented Jan 18, 2018

I fully agree. this is the solution that temporary solves the problem, until the Inbox app (if ever) gets an update. I know it's not ideal, but with some type of templates it simply solves the problem. Email code, in general is a massive junk of "fixes" when one really wants the final design to look consistent. so here's just another one :)

@TedGoas

This comment has been minimized.

Show comment
Hide comment
@TedGoas

TedGoas Jan 30, 2018

Owner

@dariobros @hitimes that is depressing but fair. We should fix this for all iPhone sizes, so I'm thinking of grabbing the portrait iPhone media queries from here and replicating this 4-5 times. Think that should do it?

Owner

TedGoas commented Jan 30, 2018

@dariobros @hitimes that is depressing but fair. We should fix this for all iPhone sizes, so I'm thinking of grabbing the portrait iPhone media queries from here and replicating this 4-5 times. Think that should do it?

@dariobros

This comment has been minimized.

Show comment
Hide comment
@dariobros

dariobros Jan 30, 2018

sounds like a plan, things keep changing and the css code may need updating too. (I'm not working on emails at the moment) - what is always good is running tests on each device - that will help eliminate any errors. good luck.

dariobros commented Jan 30, 2018

sounds like a plan, things keep changing and the css code may need updating too. (I'm not working on emails at the moment) - what is always good is running tests on each device - that will help eliminate any errors. good luck.

@TedGoas

This comment has been minimized.

Show comment
Hide comment
@TedGoas

TedGoas Jan 30, 2018

Owner

@dariobros cool, just gut-checking the approach. Even with Litmus, I don't have access every iPhone size, so I'll only be able to test three iPhone sizes and just hope the other two get fixed too 🙈

Owner

TedGoas commented Jan 30, 2018

@dariobros cool, just gut-checking the approach. Even with Litmus, I don't have access every iPhone size, so I'll only be able to test three iPhone sizes and just hope the other two get fixed too 🙈

@TedGoas

This comment has been minimized.

Show comment
Hide comment
@TedGoas

TedGoas Jan 30, 2018

Owner

Thanks to Eric Lepetit @ericlepetitsf) for help troubleshooting the original bug.

Crediting this here cause it's a little weird to have this attribution in the source code of each template.

Owner

TedGoas commented Jan 30, 2018

Thanks to Eric Lepetit @ericlepetitsf) for help troubleshooting the original bug.

Crediting this here cause it's a little weird to have this attribution in the source code of each template.

@TedGoas

This comment has been minimized.

Show comment
Hide comment
@TedGoas

TedGoas Jan 31, 2018

Owner

UPDATE: So far this solution referenced above hasn't fixed it. Also while testing, I quickly remembered how not not every version of Gmail supports media queries, so I wonder if a fix that relies on media queries will truly fix this.

I'm currently stripping down one of the templates to see if I can locate a common trouble-maker and make this work without needing media queries. Eg. the 2-col pattern in the fluid template seems to be a trouble-maker.

I will investigate further, but might take longer than expected.

Owner

TedGoas commented Jan 31, 2018

UPDATE: So far this solution referenced above hasn't fixed it. Also while testing, I quickly remembered how not not every version of Gmail supports media queries, so I wonder if a fix that relies on media queries will truly fix this.

I'm currently stripping down one of the templates to see if I can locate a common trouble-maker and make this work without needing media queries. Eg. the 2-col pattern in the fluid template seems to be a trouble-maker.

I will investigate further, but might take longer than expected.

@TedGoas TedGoas closed this in c8d0b6a Feb 6, 2018

@TedGoas

This comment has been minimized.

Show comment
Hide comment
@TedGoas

TedGoas Feb 6, 2018

Owner

Hello everyone, long story short looks like a media-query based fix can fix this issue. Yea yea you were right all along 😀. This commit fixes everything I could test on my devices and in Litmus.

There is a new issue I uncovered in the process, but it's largely unrelated to this issue and can/should be fixed separately.

Owner

TedGoas commented Feb 6, 2018

Hello everyone, long story short looks like a media-query based fix can fix this issue. Yea yea you were right all along 😀. This commit fixes everything I could test on my devices and in Litmus.

There is a new issue I uncovered in the process, but it's largely unrelated to this issue and can/should be fixed separately.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment