Currently immersed in a project, I've crafted a webpage solely using HTML and CSS. Seeking responsiveness, I've implemented three distinct stylesheets - one for widths exceeding 2000px, another for widths ranging from 901px to 1999px, and the last for widths below 900px. My challenge lies in concealing certain elements present in the wider viewports when the width diminishes to 900px or less, while ensuring that their nested elements remain visible.
<div class=”parent-element”>
<div class=”nested-element”>
</div>
</div>
I attempted to hide the "parent-element" using the following CSS snippet, but it inadvertently concealed the "nested-element" as well:
.parent-element {
display: none;
}
How can I bring back the visibility of the "nested-element" without displaying the "parent-element"?
Despite my endeavor with this code, it failed to achieve the desired outcome:
.nested-element {
display: block;
}
Furthermore, the stylesheet designated for 900px screens is inheriting styles from the other two sheets - how might I prevent this unwanted behavior?