Skip to content
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.

Sign up for GitHub

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

Jump to bottom

yahoo mobile app not reading CSS rules from <style> in <head> #98

Closed
collinsethans opened this issue Feb 18, 2017 · 8 comments
Closed

yahoo mobile app not reading CSS rules from <style> in <head> #98

collinsethans opened this issue Feb 18, 2017 · 8 comments
Labels
question nothing reported, just asking a question

Comments

@collinsethans
Copy link

collinsethans commented Feb 18, 2017 •
edited
Loading

I created a customized template from your templates. They work properly on desktop as well as on gmail mobile app (using android/galaxy s4). However, yahoo mobile app doesn't read the styles and shows a shrinked version of desktop view.

I tried opening the yahoo mail on desktop chrome after changing the device mode to that of mobile and there yahoo is reading the <style>s. (there's another issue here where yahoo splits words, even word-break:normal;word-wrap:normal' doesn't work. But I guess this is low priority).

When I move the <style> from head to body, yahoo mobile app shows the responsive version, but then gmail mobile app now doesn't read those styles.

I send my test email to my yahoo/outlook/gmail accounts and then view there. I have also posted this on stackoverflow (http://stackoverflow.com/questions/42321841/) FYI.
@TedGoas
Copy link
Collaborator

TedGoas commented Feb 20, 2017 •
edited
Loading

@collinsethans Hi, thanks for reporting. Which template are you using? And are you referring to the native Yahoo app on Android?

Also thanks for posting to Stack Overflow :)

@TedGoas TedGoas added the question nothing reported, just asking a question label Feb 20, 2017
@TedGoas
Copy link
Collaborator

TedGoas commented Feb 24, 2017

@collinsethans Did some digging. On Android, Yahoo only supports <style> tags in the body, not in the head. Which Cerberus template are you using? Sounds like cerberus-hybrid.html is the one you want to at least get the columns stacking in Yahoo! Mail.

@collinsethans
Copy link
Author

collinsethans commented Feb 24, 2017 •
edited
Loading

@TedGoas Sorry for the delayed reply. I have made a small snippet of the code and added it to the stackoverflow question.

I have referred to the cerberus-hybrid.html code. I had a previous code that was primarily a skeleton -- updated with fragments mostly from here. (Thank you for this great codebase and maintaining it).

Given your finding on <style> in body, I am thinking of replicating the <style> there -- do you see any issue with duplication of styles?

Can you also share some pointers on the source of the information (yahoo/android/style/body)? I did try to figure out on the net before posting, but didn't find.

Another query, a bit unrelated -- does outlook mobile app support media queries?

@TedGoas
Copy link
Collaborator

TedGoas commented Feb 24, 2017

@collinsethans I answered your question on Stack Overflow. TL;DR: Try duplicating the <style> tag both in the <head> and <body>.

Regarding Outlook mobile app, I believe iOS supports media queries but Android does not. Not 100% sure about that, though.

@TedGoas
Copy link
Collaborator

TedGoas commented Mar 1, 2017

@collinsethans Hi Ethan, since we've been discussing your implementation over on Stack Overflow, I'm going to close this issue.

@TedGoas TedGoas closed this as completed Mar 1, 2017
@collinsethans
Copy link
Author

@TedGoas Sure, this can be closed.

Are there any rules like the <style> needs be right after the <body> tag or can it also be deep down inside?

Another query: I see many sites now say that <table>s are no more required in emails and we can do well with <div>s. What do you suggest?

@TedGoas
Copy link
Collaborator

TedGoas commented Mar 1, 2017

Not sure. Guessing it's safest to put it right after the opening <body>.

@collinsethans
Copy link
Author

collinsethans commented Mar 4, 2017 •
edited
Loading

@TedGoas I tested with <style> duplicated in <body>. Both yahoo and gmail on android work fine with it.

I however notice that yahoo is increasing the font size. My config has font-size of 15px but yahoo seems to be making it ~18px. It's definitely not degrading, but takes away configurability.

On a side note, outlook on android just doesn't work -- it shrinks the desktop view and presents it.

@collinsethans collinsethans mentioned this issue Mar 9, 2017
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question nothing reported, just asking a question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@collinsethans @TedGoas