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
Post a Comment