Cerberus
Cerberus copied to clipboard
TedGoas
responsive version outlook365 webmail
Hi, in the webmail interface of outlook365 the responsive layout have a problem with the resizing.
Any help?
@torot78 I don't believe Outlook 365 webmail on Android supports media queries. Is this cerberus-responsive.html or cerberus-hybrid.html?
i've found this article https://cm.engineering/coding-mobile-first-emails-1513ac4673e#.17wuvnf9q i've put the [owa] tag in the classes and it seems it works.
[owa] .email-container { width: 100% !important; margin: auto !important; }
@torot78 brilliant! Is this the only places you've added the [owa] tag in the CSS?
[owa] .email-container {
width: 100% !important;
margin: auto !important;
}
You have to duplicate all classes inside media queries and put them at the end of style. But i've found That in owa desktop version the style is applied and could be a little strange. We have found another medium quey lack on yahoo Mobile version for the responsive version. Overall the hybrid version performs better on these client. Do you thing is better to open a new branch? I did not check on all devices yet.
You have to duplicate all classes inside media queries and put them at the end of style.
What do you mean? Can you paste sample CSS here?
@torot78 Is the [owa] hack working on outlook mobile app for android as well?
The lack of media query on yahoo/android may be solved by duplicating the <style> inside <body>. Note that the fonts however are larger. Refer the last response here: https://github.com/TedGoas/Cerberus/issues/98
FWIW, having an empty <head></head> before the real one will take care of Yahoo!'s app. It removes either the first head or styles in the first head it finds (not sure), so feeding it an empty one tricks it into not doing away with embedded CSS.
I've had really great success in the Outlook app and Yahoo with changing the columns from td tags to th tags. I've checked on all of the clients in the list with the exception of mail.ru. Many of the apps and browsers display table data as inline, where the table header tags will display a block when reaching mobile size. You can research this and verify it. I thought I'd mention it before submitting a pull request. I remembered that hack after seeing that is how Zurb's Foundation for email handles columns, but this may even help with the other sections as well.
@nusserstudios the <td>s were changed to <th>s in this PR a while back, is this the change you're suggesting?
If so, mind testing the copy of 'cerberus-responsive.html` in Office365 webmail? I don't have a way to test atm.
Oh they certainly are now. My mistake. Yes, that is exactly what I was suggesting. I can definitely test it in OSX and Windows 10 as well.