How To Show Or Hide Page Elements On A Mobile Device Using Css 980x491

How to show or hide page elements on a mobile device using CSS?

When applying CSS to your HTML, there are many times you specifically want to show or hide an element on the screen when being viewed on a mobile device.

This little CSS code snippet can come in handy when trying to have max control of your page elements in a responsive setting.

In your CSS file, simply add the below code:

@media only screen and (max-width: 600px) { .mobile-only-class { display: none !important; } } 

In this example, we specify an HTML element with a class of .mobile-only-class to not be visible on a mobile device.

It is all that simple; you can use this method to get creative and show/hide many elements on your responsive website to give a more custom “mobile-ready” user experience.

Hope this helps someone in need!

Leave A Comment


Need some help?

Share a few details about your new or existing website.

    Text Us 24/7