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!

Previous PostNext Post

Leave a Reply

Your email address will not be published. Required fields are marked *