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