Tag: hide element

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:

CSS
1
2
3
4
5
6
7
8
9
10
11
/* simplecodetips.com hide div example */
 
@media screen and (max-width: 1124px)
 
{    
 
.class-name { display: none; }
 
}
 
/* end */

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

Make div Disappear with CSS Media Queries on Screen Width
CSS
1
2
3
4
5
6
7
8
9
10
11
/* simplecodetips.com hide div example */
 
@media screen and (max-width: 1024px) {   .div1 { display: none; } }
 
@media screen and (max-width: 924px) {    .div2 { display: none; } }
 
@media screen and (max-width: 824px) {    .div3 { display: none; } }
 
@media screen and (max-width: 424px) {    .div4 { display: none; } }
 
/* end */

See a live DEMO of various screen sizes.