How to Easily Debug CSS Layout Issue

Updated
featured-image.png

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.

wireframe-mode-page2.jpg

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.

Fajarwz's photo Fajar Windhu Zulfikar

I'm a full-stack web developer who loves to share my software engineering journey and build software solutions to help businesses succeed.

Email me
Ads
  • Full-Stack Laravel: Forum Web App (Complete Guide 2024)
  • Flexible and powerful review system for Laravel, let any model review and be reviewed.

Share

Subscribe

Sign up for my email newsletter and never miss a beat in the world of web development. Stay up-to-date on the latest trends, techniques, and tools. Don't miss out on valuable insights. Subscribe now!

Comments

comments powered by Disqus