Search code examples
htmlcssmedia-queriesdisplaymodern-ui

How to make a parent div not rendered and visualized but remain the child components visualized on media query?

I'd like to achieve displaying none in the dom tree the parent div, but to keep the child div stil visualized by css only.

<div>                    // keep this div
  <div>                         // with media query make this div dissapear
    <div>                    // keep this div

     </div>
  </div>
</div>

Solution

  • Setting display: none on the parent will prevent child elements from being displayed, and I don't believe there's any way around that, but the visibility property can be overridden by children, so setting visibility: hidden on the parent and visibility: visible on the child will make only the parent invisible. It will, however, still take up space in the DOM, but you may be able to play around with positioning and the box model to make it work for your use-case.