Member Avatar for dwlamb

I am working on a responsive web design. For some resolutions like below 800px across, I hide a whole div with syntax such as:

@media only (max-width : 800px) {
    div.well._menu {
        display: none;
    }
}

How do I bring the div back to its default if the display property has not been declared originally? Do I use inherit?

    @media only (min-width : 801px) {
        div.well._menu {
            display: inherit;
        }
    }
  • 3 Contributors
  • 3 Replies
  • 267 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by dwlamb

Dani AI

Generated

Both and the earlier replies point in the right direction, but a few subtle CSS rules explain why inherit wasn't the right choice and what to do instead.

display has an initial value defined by the spec (not the same as an element's browser default), and inherit forces the element to copy its parent’s computed value — which is usually not what a standalone <div> should use. Use an explicit display at the larger breakpoint, or use a keyword that actually rolls the cascade back to the browser/user default. (developer.mozilla.org)

A modern, robust pattern is to restore the element with revert (which returns the cascaded value to whatever the UA/user stylesheet would have given), with a safe fallback for older browsers. Example:

@media (min-width: 801px) {
  .well._menu {
    display: block;    /* fallback for old browsers */
    display: revert;   /* restores the browser/user default where supported */
  }
}

revert behavior and compatibility details are documented by MDN; check browser support before relying on it alone. (developer.mozilla.org)

Troubleshooting checklist: confirm the computed style in DevTools (it shows which rule wins), verify there’s no inline style or a more specific selector applying display:none, and ensure no ancestor has display:none (that keeps children hidden). Also note display is a discrete property (not animatable) — use opacity/transform for transitions. (developer.mozilla.org)

Practical guidance: for predictable results declare the desired display at each breakpoint (mobile-first is usually easiest), or use revert with a fallback as shown above. Avoid inherit for display unless intentionally matching the parent.

Recommended Answers

All 3 Replies

Member Avatar for Violet_82

the default value for display is block. So you just do display:block;.

Member Avatar for ryantroop

or, just don't put anything for display and it's natural state will take over. At least, I believe that to be the case...

Member Avatar for dwlamb

thanks for the help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.