Removing and add elements depending on resolution
In this article you will learn how to remove and add elements depending on resolution in your web project and that with pure CSS, without using fancy resources.
Hey you programmer, okay? Let’s learn something new!
In this issue of adding or removing elements according to resolution, we are talking about responsiveness.
That is, at certain resolutions the screen adapts in some way, which can even add an element
For this we use media queries, which is the way we have to control a certain CSS style at a specific resolution
Let’s take an example project, to understand what happens:
<!DOCTYPE html> <html> <head> <title>Remover e adicionar elementos dependendo da resolução</title> <meta charset="utf-8"> </head> <body> <div id="box"></div><br> <div id="box2"></div> </body> </html>
This box id div will only be displayed at resolutions less than 1000px
The div with id of box2 will disappear when the resolution is less than 800px
See the CSS required for these views and removals:
div {
width: 50px;
height: 50px;
}
#box {
background-color: red;
display: none;
}
#box2 {
background-color: blue;
}
@media(max-width: 1000px) {
#box {
display: block;
}
}
@media(max-width: 800px) {
#box2 {
display: none;
}
}
Before explaining the code, resize your browser and see that the elements behave the same as mentioned above.
And the only time the elements appear together is when the screen is between 800px and 1000px, which is exactly what is proposed
Before the media queries, the code was just to define each div giving it width, height and a background color.
The @media(max-width: 1000px) property is defining that all the rules will be executed when the screen gets smaller than 1000px
And @media(max-width: 800px) is defining what will happen below 800px
And this is how we control styles in certain resolutions
We have the max-width rule too, which works unlike min-width.
Conclusion
In this article we learned how to remove and add elements depending on resolution
For this, we use media queries, which are responsible for adjusting the responsiveness of websites
That is, with them we can manipulate CSS rules depending on the screen resolution
Not just adding or removing elements, but anything within the reach of CSS
Want to learn more about CSS? Click here!
