Make div Disappear with CSS Media Queries on Screen Width

This simple example will show you how to make a div disappear with CSS Media Queries on screen width.

How can you make a div content disappear when the screen reaches a certain width using media queries? The answer is quite simple, you use CSS and display: none property.

Let’s say that you have a div that needs to disappear when someone is accessing your webpage from a tablet or mobile phone.

You can use this list of common resolutions to figure out if you want to hide or display certain parts of your website.

To hide a particular object you can use a class or id this way:

You can mix the size variable to fit your needs by modifying the @media screen and (max-width: 1124px)

See a live DEMO of various screen sizes.