DEV Community

Fajar Windhu Zulfikar
Fajar Windhu Zulfikar

Posted on • Originally published at fajarwz.com on

How to Easily Debug CSS Layout Issue

Writing CSS Illustration

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;
}
Enter fullscreen mode Exit fullscreen mode

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

web page with wireframe

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more