{"action":"created","issue":{"url":"https://api.github.com/repos/mjmlio/mjml/issues/919","repository_url":"https://api.github.com/repos/mjmlio/mjml","labels_url":"https://api.github.com/repos/mjmlio/mjml/issues/919/labels{/name}","comments_url":"https://api.github.com/repos/mjmlio/mjml/issues/919/comments","events_url":"https://api.github.com/repos/mjmlio/mjml/issues/919/events","html_url":"https://github.com/mjmlio/mjml/issues/919","id":281579863,"number":919,"title":"mj-column stacked on desktop GMX / WEB.DE","user":{"login":"vielhuber","id":3183737,"avatar_url":"https://avatars3.githubusercontent.com/u/3183737?v=4","gravatar_id":"","url":"https://api.github.com/users/vielhuber","html_url":"https://github.com/vielhuber","followers_url":"https://api.github.com/users/vielhuber/followers","following_url":"https://api.github.com/users/vielhuber/following{/other_user}","gists_url":"https://api.github.com/users/vielhuber/gists{/gist_id}","starred_url":"https://api.github.com/users/vielhuber/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vielhuber/subscriptions","organizations_url":"https://api.github.com/users/vielhuber/orgs","repos_url":"https://api.github.com/users/vielhuber/repos","events_url":"https://api.github.com/users/vielhuber/events{/privacy}","received_events_url":"https://api.github.com/users/vielhuber/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2017-12-13T00:00:58Z","updated_at":"2017-12-13T10:46:46Z","closed_at":null,"author_association":"NONE","body":"Hello!\r\n\r\nWhen using the german webmail clients [gmx.de](https://www.gmx.de) and [web.de](https://www.web.de), mj-column items get stacked on desktop.\r\n\r\nThe reason for this is that the !important tag is stripped from these instructions:\r\n\r\nSo\r\n\r\n```\r\n<style type=\"text/css\">\r\n@media only screen and (min-width:480px) {\r\n.mj-column-per-100 { width:100%!important; }\r\n.mj-column-per-40 { width:40%!important; }\r\n.mj-column-per-20 { width:20%!important; }\r\n.mj-column-per-50 { width:50%!important; }\r\n.mj-column-per-48 { width:48%!important; }\r\n.mj-column-per-4 { width:4%!important; }\r\n}\r\n</style>\r\n```\r\n\r\nbecomes\r\n\r\n```\r\n<style type=\"text/css\">\r\n@media only screen and (min-width:480px) {\r\n.mj-column-per-100 { width:100%; }\r\n.mj-column-per-40 { width:40%; }\r\n.mj-column-per-20 { width:20%; }\r\n.mj-column-per-50 { width:50%; }\r\n.mj-column-per-48 { width:48%; }\r\n.mj-column-per-4 { width:4%; }\r\n}\r\n</style>\r\n```\r\n\r\nSo the inline styles override those media queries.\r\n\r\nA solution to this problem is to provide max-width values additionally. So we can get a good result also on desktop without breaking the mobile first approach with this code:\r\n\r\n```\r\n<style type=\"text/css\">\r\n@media only screen and (min-width:480px) {\r\n.mj-column-per-100 { width:100% !important; max-width:100%; }\r\n.mj-column-per-40 { width:40% !important; max-width:40%; }\r\n.mj-column-per-20 { width:20% !important; max-width:20%; }\r\n.mj-column-per-50 { width:50% !important; max-width:50%; }\r\n.mj-column-per-48 { width:48% !important; max-width:48%; }\r\n.mj-column-per-4 { width:4% !important; max-width:4%; }\r\n}\r\n</style>\r\n```\r\n\r\nDo you agree? Should I make a pull request for that?"},"comment":{"url":"https://api.github.com/repos/mjmlio/mjml/issues/comments/351354459","html_url":"https://github.com/mjmlio/mjml/issues/919#issuecomment-351354459","issue_url":"https://api.github.com/repos/mjmlio/mjml/issues/919","id":351354459,"user":{"login":"vielhuber","id":3183737,"avatar_url":"https://avatars3.githubusercontent.com/u/3183737?v=4","gravatar_id":"","url":"https://api.github.com/users/vielhuber","html_url":"https://github.com/vielhuber","followers_url":"https://api.github.com/users/vielhuber/followers","following_url":"https://api.github.com/users/vielhuber/following{/other_user}","gists_url":"https://api.github.com/users/vielhuber/gists{/gist_id}","starred_url":"https://api.github.com/users/vielhuber/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vielhuber/subscriptions","organizations_url":"https://api.github.com/users/vielhuber/orgs","repos_url":"https://api.github.com/users/vielhuber/repos","events_url":"https://api.github.com/users/vielhuber/events{/privacy}","received_events_url":"https://api.github.com/users/vielhuber/received_events","type":"User","site_admin":false},"created_at":"2017-12-13T10:46:46Z","updated_at":"2017-12-13T10:46:46Z","author_association":"NONE","body":"All information available on new features (gutter etc.) I'm currently find on the medium articles, correct?"}}
{"actor":{"display_login":"vielhuber"}}