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.
display:none- this method will literaly remove the div element or any element from the page. It doesn't take space.
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:
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.
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.