Effectively Hiding Elements on Mobile

No Comments
Effectively Hiding Elements on Mobile

There are numerous instances where you may consider hiding certain elements on mobile displays. For instance, you may hide a print button on mobile since it’s not attached to printers; a print button becomes of no use on mobile devices because they only take up valuable screen space. Thus, it’s important for you to hide certain elements ton mobile devices. The utility is enabled by showing elements in a way that is different when a user views from a smartphone. Nowadays, mobile devices users are increasing by the day; hence, the importance of having techniques that will effectively hide particular elements so as to be viewed on mobile.

Here are some simple steps to show how you can effectively hide content that will suit a mobile user.

A Test + Pick Your Landing Page

Take a website that you have been working on and test on what your mobile customers would want to see on your pages that will be different from those using the desktop. Here are some of the ideas that might be of help:

  • Having mobile code on pages promoting content that’s not compatible to be downloaded via mobile like Excel templates or mobile viewers not being able to download content on their devices even after validation.
  • Having a different text to acknowledge mobile users that they’re viewing mobile content. This would even promote mobile conversions.
  • Displaying different layouts, headers, and images that suit the mobile viewers. This is a chance for you to explore the behavior of mobile viewers and see what they prefer.

Hiding Content on Mobile Devices

Effectively Hiding Elements on Mobile Devices

Such content that you don’t want it to be displayed on mobile devices can be done using HTML and CSS. Here is the code to include in your body section of the website.

In the body section of HTML, create a division to display content meant for mobile only.

<body>
<div class=”mobileHide”>

**CONTENT FOR MOBILE VIEWERS**

</div>
</body>

The above code will be preceded by an additional code that will be in the head section.
<style type="text/css">
    .mobileHide { display: inline;}
    /* Portrait and Landscape for smartphones */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
        .mobileHide { display: none;}}
</style>

If you have many pages, and you want the same thing to apply on all the pages, then include this in your CSS code.

.mobileHide {display: none;}

Do The Test Using Mobile A Device

Once you have finished laying the code, including the text/images you will hide and unhide for mobile viewers only, it’s important that you test out the page on a mobile device. Don’t forget this step to ensure that everything is working the way it is supposed to on your desktop versus your mobile device.

Email clients

Gmail and outlook among other email clients have enabled the feature of hiding to enable better viewing for the mobile users. The feature incorporates changing of the elements’ layout and size when a mobile viewer uses their gadgets to view. This kind of changing creates convenience when using a mobile rather than viewing the page as a desktop counterpart. The ‘display: none’ technique is still used although it is not that straightforward due to oddity on email clients such as Gmail and Outlook 2007 and 2010.

Still in the HTML body, write the following to do the trick:

<!--[if !mso 9]><!-->
<div class="mobilecontent" style="display:none;max-height:0px;overflow:hidden;">
/*Content for mobile to be written here*/

**MOBILE CONTENT FOR MOBILE VIEW ONLY**

</div>
<!--<![endif]-->

The content will then be shown within mobile clients by adding a media query of this form:

<style>
@media screen and (max-device-width: 400px) {
   div[class=mobilecontent]{
   display: block !important;
   max-height: none !important;}
}
</style>

Two of the forms of content that will enable you to hide content are discussed below to help you understand.

Display: none

This way is effective while on the HTML side. Sometimes, you’ll find Gmail stripping out styles with this technique while outlook is a bit erratic when it comes to abiding by this rule. This means that there are more additions to be considered despite using the method.

Max-height

Since ‘display’ rule does not work for Gmail, the next option on the table is to set the height to 0 pixels. On the other hand, Gmail converts heights set in CSS to a minimum. So it is always advisable to use max-height which is set to 0, (max-height: 0px; overflow: hidden 😉 and overflow is set to hide content within Gmail. Also, it is important to wrap the content with ‘<div></div>’ tags which set the maximum height and overflow.

Here’s a HTML code that you may use to include the print button;

<button id="printbtn">Print</button>

Pure CSS Using a Media Query

This method is the easiest to apply; it uses no JavaScript. Nonetheless, it is to some extent imprecise. Whereby, it works on the assumption that your screen’s maximum width is less than 1024 pixels.

CSS:

@media only screen and (max-device-width : 1024px) {
#printbtn { display:none; }
}

CSS + Pure JavaScript

You can use this technique, which involves combining CSS and JavaScript, to ensure that all JavaScript-enabled touch devices will be accurately identified, rather than being guessed. The snippet demonstrated below is totally elegant since you use it from the <head> of the HTML document.

JavaScript:

if('ontouchstart' in document.documentElement);
document.getElementsByTagName("html")[0].className = 'touch';

However, If you use the touch class from the <body> then you have to be careful by ensuring that the code is not run until the <body> node of the HTML document has been loaded. However, a shortcoming with using the code snippet above in the <body> is that if you name it with a similar name as an already existing class name in the <head>, it shall overwrite its methods. Therefore, to bypass the caveat, check if the <head> tag has a class with a similar name. The code snippet below enables you to detect and append element hiding to an existing className:

JavaScript:

if('ontouchstart' in document.documentElement){;
var htag = document.getElementsByTagName("html")[0];
htag.className = (htag.className.length) ? htag.className + ' touch' : 'touch';
};

CSS:

.touch #printbtn { display:none; }

By using the CSS, you declare hiding the button if it’s nested to another element that contains the touch class applied.

CSS + JQuery

You can also achieve element hiding by combining CSS with JQuery. The JQuery library has various capabilities, however since this topic requires element hiding, you will have to use the code below.

Jquery:

If ('ontouchstart' in document.documentElement) $('html').addClass('touch');

By using the addClass method, you shall avoid overwriting an existing class. Better yet, it enables you to apply this functionality using fewer lines than the ‘CSS + pure JS’ technique.

CSS:

.touch #printbtn { display:none; }

And since you do not want to print the print button, you can use a media query to solve this.

CSS:

@media print {
    #printbtn { display:none; }
}

With the above techniques, you can effectively hide elements on mobile devices. As demonstrated, mobile optimization cannot easily be used retrospectively. You require following a precise technique for you to optimize complex designs. For excellent performance on mobile devices, you need to consider certain factors from the initial stages of the design process.

Chris is a father of 4 and works full time as a network engineer. He loves The Office, P & R, brewing (and drinking) beer, and of course Web Design and SEO.

About us and this blog

We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

Request a free quote

We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

Subscribe to our newsletter!

Hosting Offers

More from our blog

See all posts

Leave a Comment