Html Question posted in
Some basic documentation can be found here.

Html – Make a DIV disappear when it reaches a certain width WITHOUT JavaScript

This is a CSS-only problem, no JavaScript allowed.

I have a DIV that when it reaches a certain width, it should disappear. @media (max-width: 1024px) {} works for the normal cases as the browser resizes.

BUT…..

There are screens that have a pop-open side panels that will squeeze the DIV into the left-half of the screen. In this situation, I’d like the DIV to also disappear just like the @media condition above. When the panel closes, the DIV should reappear normally.

I’ve tried DIV within a DIV, different display property types in combo with overflow, flex, and, of course, various @media settings.

Tags:

2

Answers


  1. 0

    Try using media query in css

    .my_div_class{
  display: block; /* can be any thing flex, grid */
}

@media only screen and (max-width: 540px /* any unit you want */) {
  .my_div_class{
    display:none;
  }
}

    Above media queries state following things:

    It is applied only on screens and if it between 0-540px (max width) then it applies following styles which are specified inside scope

    More on media queries:
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries

    If you are using tailwind css

    <div class="hidden md:block">
<!---contents -->
</div>

    Note tailwind uses reverse order media query means you have to specify first styles small screens and then larger screens
    In above example we have specified display:none to small screens and if screen width crosses specific width then it applies styles which is written inside md: scope

    you can read more about tailwind here
    https://tailwindcss.com/docs/responsive-design

    Login or Signup to reply.
  2. 0

    This is possible using container queries.

    Essentially, the selected div can only be styled on it’s parent’s size, not its own. You could wrap the div to be selected in another div, then when the parent reaches a certain width you could display: none the child and the parent would collapse.

    .trigger {
  container-type: inline-size;
  container-name: trigger
}

.child {
  height: 20px;
  background: red;
}

@container trigger (min-width: 900px) {
  .child {
    display: none;
  }
}
    <div class="trigger">
  <div class="child"></div>
</div>

    If you run this snippet you will see a red block, if you then view it via the "Full Page" link it will be hidden.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search