DEV Community

John Peters
John Peters

Posted on

The power of display:none;

When trying to build a responsive web page, we often find that the responsiveness just stops prematurely. When the width or height is increased or decreased, the responsive page should always follow suit.

Alt Text

In the image above we took out the red arrow markup and replaced it with the green. That fixed the issue.

But finding it was a bit more of a challenge as we had lots of components, and didn't know which one was causing the whole page to stop flowing prematurely when the width was lessened.

We started first by using display:none on all but the element that seemed to have the issue. When we determined it was flowing properly, we then added one element at a time until, we found the problem shown above. That bug was seven elements deep. And quickly found by using display:none!

Top comments (1)

Collapse
 
ionline247 profile image
Matthew Bramer

This post should be titled: "How my team's velocity was impeded by unnecessary tooling".