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!