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 are specifying an HTML element that has a class of .mobile-only-class to not be visible on a mobile device.

It is all really 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.