How to disable a part of HTML with media queries?

Question

I'm trying to disable a part of my HTML, this code:

<div class="right">

with Media Queries when it gets to a certain screen size, but I'm not sure how to do it. Any suggestions?

Thanks

Does this answer your question? [How do I disable form fields using CSS?](https://stackoverflow.com/questions/5963099/how-do-i-disable-form-fields-using-css) — Alessio Cantarella, Jan 21 '20 at 22:48
You can't "disabled" does not apply to divs, so that won't work for a start. What you can do is hide the element with `display:none` — Jon P, Jan 21 '20 at 23:15
It worked, but not the way, I needed it too. Is there a way to put a
to override the previously mentioned HTML when the screen size is 600px only? — Tamari Campbell, Jan 21 '20 at 23:59
You can't "override" with CSS, only style, including hiding and showing. Perhaps provide a more complete example of what you are trying to achieve. At the moment your question is a little vague. — Jon P, Jan 22 '20 at 00:05

score 1 · Accepted Answer · answered Jan 21 '20 at 23:54

If by disable you mean "disappear". Then you can use media queries to make that happen by setting the display property to none. Like this:

/* A bit of color  */

.right {
  height: 200px;
  background-color: crimson;
}


/* Hide the <div> with class "right" when the screen width is 600 pixels or lower */

@media (max-width: 600px) {
  .right {
    display: none;
  }
}

<div class="right"></div>

Tip: Click "Run code snippet", then click "full page" and resize the screen of the browser until it disappears.

Learn more about media queries here.

How to disable a part of HTML with media queries?

1 Answers1