html - Gmail ignoring media query? - create a mobile-only div -


i trying make <div> visible on mobile.

inside <head> tag have:

<style>  @media screen , (min-device-width: 481px) {   div[class="mobile-only"] {      height: 0px !important;     overflow: hidden !important;     }  }  @media screen , (max-device-width: 480px) {   div[class="mobile-only"] {      height: auto !important;     overflow: auto !important; }  </style> 

and in html:

<div class="mobile-only">   <table...> </div> 

i have tried gazillion (roughly) different ways of getting work, such display: none; gmail seems totally ignore media query , show <div> regardless.

is there trick this? works in outlook client.

you can try following:

html:

<div class="mobile-only" style="overflow:hidden; float:left; display:none; line-height:0px;"><br/>this hidden on desktop!</div> 

css:

@media screen , (max-device-width: 480px) {   *[class="mobile-only"] {     overflow: visible !important;     float: none !important;     display: block !important;     line-height:100% !important;   } } 

and mentioned in linked answer styles in html emails should set inline.


Comments

Popular posts from this blog

sql - invalid in the select list because it is not contained in either an aggregate function -

Angularjs unit testing - ng-disabled not working when adding text to textarea -

How to start daemon on android by adb -