On this tutorial you learn how to hide any div tag on mobile but show it on desktop devices. Or vice versa if you want to show it on mobile but hide it on desktop. If you are pretty new to CSS then this tutorial will be your best bet. It’s pretty easy!
Hide div for mobile devices and show it on desktop or pc users. And hide a div for desktop or pc users but show it on mobile devices.
Ways on Hiding a DIV using CSS
Currently there are main two methods to hide a div tag using a CSS. Here’s a list for you to try on and see which works best in your scenario.
- Using
display:none– this method will literaly remove the div element or any element from the page. It doesn’t take space. - Using
visibility:hidden– this method will just hide the element. It’s still there but its invisible from your eyes. What does that mean? It still takes space like if you are using this method on a paragraph and hide some words of it you will see blank spaces .
I am going to show you an example on how to perform both of these methods below. This is how you use it:
<html>
<head>
<style>
.hide-1 {display:none;}
.hide-2 {visibility:hidden;}
<style>
</head>
<body>
<p>This is an axample on how to hide elements. You won't see texts after this....<span class="hide-1">this word is totally hidden</span>. It's like it wasn't there.</p>
<p>This is an axample on how to hide elements. You won't see texts after this....<span class="hide-2">this word is totally hidden</span>. It's there but its not visible.</p>
</body>
</html>Now, depends on what you want and how you want to use them. Both of these method will come handy. For showing div elements on mobile or desktop devices.
How to Hide div Element on Mobile but show it on desktop
Now, this is the real method you are looking for. Using the above mentioned CSS methods you can use these and apply on what we wanted like hiding the specific elements such as div’s on mobile but showing it on desktop.
<html>
<head>
<style>
@media only screen and (max-width: 600px) {
.hide-mobile
{display:none;}
}
</style>
</head>
<body>
<h3>This is an example only.</h3>
<p class="hide-mobile">This text should be displayed on your PC or screen size larger than 600px. If yo use your mobile device or screen size smaller than 600px then you won't see this text.</p>
</body>
</html>All you have to do is make use of the @media screen tag which defines the size of the users screen. Most mobile device has screen less than 600px so we set the max-width of the screen to 600px only to limit the display of the CSS tag on those screen sizes only or below.
How to Hide div Element on Desktop but Show it on Mobile.
Now, we are going to reverse the process. We are now going to hide the div element for PC / Desktop users and display it on mobile users only. By now, you should have a pretty much good idea on what I am about to do.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media only screen and (min-width: 680px) {
.hide-pc {
display:none;
}
}
</style>
</head>
<body>
<h3>This is how to hide element on PC but show it on Mobile.</h3>
<p class="hide-pc">This text should be displayed on your PC or screen size larger than 600px. If yo use your mobile device or screen size smaller than 600px then you won't see this text.</p>
</body>
</html>You see the difference? We set the screen size of the user to only 680px minimum width. And set to hide elements if the screen size is larger than 680px. But, show it on screen devices with less than 680px of screen size.
You can set the screen size to specific mobile device you want the element to be displayed of to be hidden. And, that is how you can hide an element or display it on any devices you want.