How to Easily Debug CSS Layout Issue

Writing CSS seems easy, but sometimes it is as challenging as coding with some programming language.

There are some issue that often we meet in our daily CSS coding. Such as styling that does not work, inconsistency design, responsive gone fail, unwanted scroll bar, etc.

Here I just want to give a tip about unwanted scroll bar or unwanted overflow element.

You can debug your layout using some kind of wireframe mode. The idea is to set border to every element in the page and make it visible enough for you so you can clearly see the width and height of every element of the page.

Here is the example code

* {
    border: 1px solid red;
}

And now we can see all of the element's width and height. If an element is overflowed we can see it clearly now.

Conclusion

So to debug a CSS layout issue such as an unwanted scroll bar or unwanted overflow element easily, add border to all elements of your page.

Have another tip on this issue or a better one? Please let us know in the comment below. Thank you.