How to Hide a div in Mobile but Show it on Desktop Or Vice Versa

| Written by: james


Table of Contents:

    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.

    How to Hide a div in Mobile but Show it on Desktop Or Vice Versa

    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:



    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.


    DEMO

    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.


    DEMO

    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.

    Author: james
    Created Date: September 15, 2020
    Updated Date: September 15, 2020