The power of display:none;

John Peters - Jan 19 '20 - - Dev Community

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!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player