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:
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: 1124
px)
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.