Support
 
 
 
Share/Save/Bookmark

Forum


Got questions? We’ve got answers...
Forum Home>EmailonAcid Forums>HTML/CSS Support >Thread

Thread
     
Hiding content from desktop view, but showing it on a mobile device
Lach25
Posted: 05 October 2011 05:09 AM   [ Ignore ]  
Newbie
Rank
Total Posts:  10
Joined  2010-08-25

Hi, I am currently developing an email using media queries for desktop and mobile viewing.

The issue I am having is that I would like to show certain content on a mobile device but not on the desktop.

I have tried using {display:none;} which I have found doesn’t work in gmail and outlook.

Then I tried {display:none !important;} which works, but it also hides the content on the mobile.

Is there a fix for this problem?

Profile
 
 
Michelle Klann
Posted: 11 October 2011 11:56 AM   [ Ignore ]   [ # 1 ]  
Avatar
Administrator
RankRankRankRank
Total Posts:  203
Joined  2009-08-23

Hello,

Have you tried using inline styles and overwriting them for the mobile version?

For example:

<style>
  @media only screen and (max-device-width: 480px) {
     body[yahoo] .mobile_only {display:block !important}
   }
</style>
...
<body yahoo="fix">
   <div class="mobile_only" style="display:none">test</div>
</body> 

In this example, I am using the Yahoo fix explained in this article:
Stop Yahoo! Mail from rendering your Media Queries

Let me know if this works smile

Profile
 
 
Lach25
Posted: 14 October 2011 02:14 AM   [ Ignore ]   [ # 2 ]  
Newbie
Rank
Total Posts:  10
Joined  2010-08-25

Hi,

Thank you! that works except in gmail, is there anything i can add to hide it there too?

Profile
 
 
Michelle Klann
Posted: 14 October 2011 10:59 AM   [ Ignore ]   [ # 3 ]  
Avatar
Administrator
RankRankRankRank
Total Posts:  203
Joined  2009-08-23

Lach,

Ug, your right, I just confirmed that Gmail does not support the inline display property if the value is set to “none.”  Each of the other values for the display property are supported.

It’s probably best to have a long version of your email and a condensed version for mobile devices where you hide certain elements on mobile devices only. 

But if you are determined to get it working, here’s something else you could try:

<style>
  @media only screen and (max-device-width: 480px) {
     body[yahoo] .mobile_only {
       width:600px !important;
       overflow:visible !important;
       float: none !important;
       }
   }
</style>
...
<body yahoo="fix">
   <div class="mobile_only" style="width:0px; overflow:hidden;
 float:left">test</div>
</body> 

Without your code, it’s hard for me to test this, let me know if that works.

Profile
 
 
Lach25
Posted: 17 October 2011 03:21 AM   [ Ignore ]   [ # 4 ]  
Newbie
Rank
Total Posts:  10
Joined  2010-08-25

Hi Michelle,

It still doesn’t seem to be working.
What I am trying to achieve is an email which contains two image headers, one to be shown on the desktop and the other shown on the mobile.

The code I am using is:

<style type=“text/css”>
  .mobile_only {display:none !imoprtant;}

  @media only screen and (max-device-width:480px;) {
  body[yahoo], div[class=“mobile_only”] {display:block !important;}
  div[class=“desktop_header”] {display:none;}
  }
</style>

<body yahoo=“fix”>
  <div class=“mobile_only” style=“display:none;”>
  test image for mobile, width=“300px”
  </div>
  <div class=“desktop_header”>
  test image for desktop width=“600px”
  </div>
</body>

Profile
 
 
Michelle Klann
Posted: 18 October 2011 11:24 AM   [ Ignore ]   [ # 5 ]  
Avatar
Administrator
RankRankRankRank
Total Posts:  203
Joined  2009-08-23

Lach,

Here are a few options that I tested on the Android and in Gmail:

1.) Re-size the same image (better for overall file size)

<style type="text/css">
  @media only screen and (max-device-width:480px;) {
     body[yahoo] .header { width:300px}
  }
</style>

<body yahoo="fix">
  <img src="http://www.url.com/image.jpg" class="header" width="600" height="100" />
</body> 

2.) Completely replace the image:

<style type="text/css">    
  @media only screen and (max-device-width:480px;) {
       body[yahoo] .mobile_only {
             width:600px !important;
             overflow:visible !important;
             float: none !important;
             }
       body[yahoo] .desktop_header {display:none}
  }
</style>

<body yahoo="fix">
  <div class="mobile_only" style="width:0px; overflow:hidden;float:left">
      test image for mobile, width="300px"
  </div>
  <div class="desktop_header">
     test image for desktop width="600px"
  </div>
</body> 
Profile
 
 
stronius
Posted: 31 May 2012 12:33 PM   [ Ignore ]   [ # 6 ]  
Newbie
Rank
Total Posts:  1
Joined  2012-05-31

Unfortunately, the fix you posted above ( width / float / overflow ) isn’t working on gmail for me. Do you have any other suggestions?

Profile
 
 
originalwannabe
Posted: 31 July 2012 07:43 AM   [ Ignore ]   [ # 7 ]  
Newbie
Rank
Total Posts:  1
Joined  2012-07-31

When trying to show certain text only on a mobile device, use “font-size: 0px” rather than “display:none;” for your inline style.
Then declare the font-size in your mobile_only class.
<style>
  @media only screen and (max-device-width: 480px) {
    body[yahoo] .mobile_only {
  font-size: 12px !important;
    }
  }
</style>
...
<body yahoo=“fix”>
  <div class=“mobile_only” style=“font-size:0px;”>test</div>
</body>

Profile
 
 
Beta2247
Posted: 13 November 2012 11:02 AM   [ Ignore ]   [ # 8 ]  
Newbie
Rank
Total Posts:  1
Joined  2012-11-13

Is there a solution to this problem yet? My team has used the approach of changing Table width based on Mobile vs Desktop version.

This works, but can break due to vast differences in image height.

Profile
 
 
Red Ant Solutions
Posted: 22 February 2013 04:19 AM   [ Ignore ]   [ # 9 ]  
Newbie
Rank
Total Posts:  1
Joined  2012-09-03

Not been able to get Outlook to behave with display none.

Profile
 
 
duanedobson
Posted: 15 May 2013 09:25 AM   [ Ignore ]   [ # 10 ]  
Avatar
Newbie
Rank
Total Posts:  1
Joined  2013-05-15

Hi guys, just been having similar issues to these mentioned above, and although you can’t hide images or tables, you can hide anchors and text..

So I managed to overcome my issue of needing a mobile nav that didn’t display on outlook and gmail, by using this..

<style>
body[ao] a.mobShowNav {display:block; background-color:#A6ACB0!important; font-family:Arial, Helvetica, sans-serif!important; font-size:16px!important; font-weight:bold; color:#ffffff!important; text-decoration:none!important; width:428px!important; padding:8px!important; border-radius:3px!important; height:inherit!important; margin:4px 0!important; background:#A6ACB0 url( http://image.app-email.com/lib/fe9f15707064047b71/m/1/ao-arrow-trans.png) no-repeat 415px center; clear:both!important}
</style>


AND IN THE BODY....

<a href="http://www.appliancesonline.co.uk/Brands.aspx" style="color:White; line-height:0px;font-size:0px;height:0px;margin:0;padding:0;" class="mobShowNav">Brands</a> 
Image Attachments
menu.jpg
Click thumbnail to see full-size image
Profile
 
 
   
 
 
‹‹ HTML & CSS for hotmail, yahoo mail and gmail      Where to put the <style> tag in <head> or <body> ››

Copyright 2012 Email on Acid, All Rights Reserved