g13nn/Email-Framework

mobileOn -mobileOff don't work

Opened this issue · 4 comments

erdemildiz commented

Hello everyone;

We are using email-framwork for our mails. Sometimes we need to seperate views for device width. For example; For mobile and desktop using different view, so we decided to use mobileOn and mobileOff, but when we add <style> at the top of page, It didn't work in gmail. Gmail removes all <style> tags, so the mail view is shown as desktop.

How can we fix. Thanks

jameswilson commented

You need to use a tool like https://github.com/jjriv/emogrifier to apply all styles in <style> tags to their respective HTML tags before sending out your emails.

jameswilson commented

Unfortunately this wont help you with mobile styles if you're using media queries and breakpoints. I don't think there is any workaround.

g13nn commented

Apologies for my late reply, to my knowledge there is no workaround to hide all on android devices using Gmail. This may help -> http://freshinbox.com/blog/targeting-new-gmail-css/

oscarOficial commented

@erdemildiz I had also this same issue and found out that the problem was in the selector:
*[class="mobileOff"] { width: 0px !important; display: none !important; } *[class="mobileOn"] { display: block !important; max-height:none !important; }
In my case I did:
.mobileOff { width: 0px !important; display: none !important; } .mobileOn { display: block !important; max-height:none !important; }

I dont know if it will have some side effects. But I hope it work for you too.

  • 👍2