The power of display:none;

github logo ・1 min read

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!

twitter logo DISCUSS (3)
Classic DEV Post from May 26 '19

How to Stay Fit Physically and Mentally and Keep Coding

Throughout the last year, I have worked part-time as a working student and also studied at the university. I was not the first and not the last one who has combined that during their studies, but the problem for me was, that at the end of the day I have felt absolutely exhausted mentally and physically. That caused problems with my health and motivation to continue working on my goals or anything. (yeah, “goals,” I wish I had something more specific at that time).

John Peters profile image
Angular, React, Typescript and JavaScript. The wave of now!

Hey there reader...

Do you prefer sans serif over serif?

You can change your font preferences in the "misc" section of your settings. ❤️