Share/Save/Bookmark

     
Hiding content from desktop view, but showing it on a mobile device
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
 
 
Posted: 11 October 2011 11:56 AM   [ Ignore ]   [ # 1 ]  
Avatar
Administrator
RankRankRankRank
Total Posts:  204
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-width480px{
     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
 
 
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
 
 
Posted: 14 October 2011 10:59 AM   [ Ignore ]   [ # 3 ]  
Avatar
Administrator
RankRankRankRank
Total Posts:  204
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-width480px{
     body[yahoo] 
.mobile_only {
       width
:600px !important;
       
overflow:visible !important;
       
floatnone !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
 
 
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
 
 
Posted: 18 October 2011 11:24 AM   [ Ignore ]   [ # 5 ]  
Avatar
Administrator
RankRankRankRank
Total Posts:  204
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;
             
floatnone !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 mobilewidth="300px"
  
</div>
  <
div class="desktop_header">
     
test image for desktop width="600px"
  
</div>
</
body
Profile
 
 
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
 
 
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
 
 
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
 
 
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
 
 
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:blockbackground-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
Profile
 
 
Posted: 24 June 2014 12:54 PM   [ Ignore ]   [ # 11 ]  
Newbie
Rank
Total Posts:  1
Joined  2014-06-20

duanedobson is exactly right.

I have found out that gmail cannot hide tr, td, or tables.. but it can hide other elements, such as divs.

If you put a div around the content that you want to hide, and give it the following inline style:

style=“display: none; mso-hide: all; width: 0px; height: 0px; max-height: 0px; overflow: hidden; line-height: 0px;”

Then it should work.  All you need to do is give it a class, and change the elements to visible on the class for mobile.. or vice versa.

Hope this helps.

Profile
 
 
Posted: 24 June 2014 01:14 PM   [ Ignore ]   [ # 12 ]  
Avatar
Administrator
RankRankRank
Total Posts:  74
Joined  2012-11-14

Not sure on exactly which elements it will hide, but,

style=“display:none !important;”

does hide elements in Gmail. More on Gmail here:
http://www.emailonacid.com/blog/details/C13/12_things_you_must_know_when_developing_for_gmail_and_gmail_mobile_apps#gmail_tip1

Profile
 
 
Posted: 10 July 2014 09:51 AM   [ Ignore ]   [ # 13 ]  
Newbie
Rank
Total Posts:  1
Joined  2010-11-15

The content to hide should be wrapped in a div and hidden for desktop. Then all of the Tables inside should also be hidden for desktop Like so:

<div style="display: none; max-height: 0px; overflow: hidden; line-height: 0px;" class="show">  
            <
table cellspacing="0" cellpadding="0" border="0" width="100%" align="center" bgcolor="#ffffff" style="display: none;" class="showTable">
                <
tr>
                    <
td  width="100%" height="30" style="border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; line-height: 30px;"><!--[if gte mso 15]>&nbsp;<![endif]--></td>
                </
tr>
            </
table>
            <
table cellspacing="0" cellpadding="0" border="0"  align="center" bgcolor="#35acd4" style="display: none;" class="showTable">
                <
tr>
                    <
td height="50" width="318" align="center" style="font-family:Arial, Helvetica, sans-serif;font-size:17px;font-weight:bold;color:#ffffff;">Get Free Ticket</td>
                </
tr>
            </
table>
            <
table cellspacing="0" cellpadding="0" border="0" width="100%" align="center" bgcolor="#ffffff" style="display: none;" class="showTable">
                <
tr>
                   <
td width="100%" height="30" style="border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; line-height: 30px;"><!--[if gte mso 15]>&nbsp;<![endif]--></td>
                </
tr>
            </
table>
          </
div

or for an image:

<div style="display: none; max-height: 0px; overflow: hidden; line-height: 0px;" class="show">
                    <
table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#ffffff" style="display: none;" class="showTable">
                        <
tr>
                            <
td align="center" width="100%"><a href="#" target="_blank" conversion="true" alias="Zone 1_Image_Get Free Passes"><img src="http://image.email.amctheatres.com/lib/fef51178716702/m/1/Fluffy_mobile_banner.jpg" alt="" width="300" height="294" border="0"/></a></td>
                        </
tr>
                    </
table>
                    </
div

Here is the css for mobile to display it:

.show {displayblock !importantmax-heightnone !importantoverflow:visible !importantline-height:normal !important;}
    
.showTable {displayblock !important;
Profile
 
 
   
 
 

x
Sign up for our Newsletter

And get updates on the latest email tips, tricks and hacks!