CSS HTML

Removing and add elements depending on resolution

November 26, 2021

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.

add elements depending on resolution cover

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!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x