2

I am trying to make a <div> only visible on mobile.

Inside the <head> tag I have:

<style>

@media only screen and (min-device-width: 481px) {
  div[class="mobile-only"] { 
    height: 0px !important;
    overflow: hidden !important;  
  } 
}

@media only screen and (max-device-width: 480px) {
  div[class="mobile-only"] { 
    height: auto !important;
    overflow: auto !important;
}

</style>

And in the HTML:

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

I have tried a gazillion (roughly) different ways of getting this to work, such as display: none; but GMail just seems to totally ignore the media query and show the <div> regardless.

Is there a trick to this? It works in my Outlook client.

Lee
  • 1,485
  • 2
  • 24
  • 44
  • 1
    maybe this will help http://stackoverflow.com/questions/22073083/gmail-responsive-email-media-queries-style-tag – Jakob Jul 11 '16 at 10:55

1 Answers1

0

You can try the following:

HTML:

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

CSS:

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

And as mentioned in the linked answer styles in html emails should be set inline.

thepio
  • 6,193
  • 5
  • 35
  • 54