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

responsive version outlook365 webmail #107

Open
torot78 opened this issue Mar 8, 2017 · 11 comments
Open

responsive version outlook365 webmail #107

torot78 opened this issue Mar 8, 2017 · 11 comments
Labels
Oh Hold currently paused or issue is out of our control question nothing reported, just asking a question

Comments

@torot78
Copy link

torot78 commented Mar 8, 2017

Hi,
in the webmail interface of outlook365 the responsive layout have a problem with the resizing.

Any help?
screenshot_2017-03-08-19-24-45
@TedGoas
Copy link
Collaborator

TedGoas commented Mar 9, 2017

@torot78 I don't believe Outlook 365 webmail on Android supports media queries. Is this cerberus-responsive.html or cerberus-hybrid.html?

@TedGoas TedGoas added the question nothing reported, just asking a question label Mar 9, 2017
@torot78
Copy link
Author

torot78 commented Mar 9, 2017

Hi is cerberus-responsive.html

@torot78
Copy link
Author

torot78 commented Mar 9, 2017

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;
}

screenshot_2017-03-09-09-46-00

@TedGoas
Copy link
Collaborator

TedGoas commented Mar 9, 2017

@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;
}

@torot78
Copy link
Author

torot78 commented Mar 9, 2017

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.

@TedGoas
Copy link
Collaborator

TedGoas commented Mar 9, 2017

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?

@collinsethans
Copy link

@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: #98

@TedGoas TedGoas added the Oh Hold currently paused or issue is out of our control label Oct 20, 2017
@cossssmin
Copy link

cossssmin commented Nov 10, 2017 •
edited
Loading

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.

@nusserstudios
Copy link

nusserstudios commented Dec 12, 2019 •
edited
Loading

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.

@TedGoas
Copy link
Collaborator

TedGoas commented Dec 15, 2019

@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.

@nusserstudios
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Oh Hold currently paused or issue is out of our control question nothing reported, just asking a question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@collinsethans @TedGoas @cossssmin @nusserstudios @torot78