The Fastest Way to Find The Element That Creates a Horizontal Scrollbar on My Web page

[Krishna Priya]

I am learning website development and stuck at a point. After completing the webpage, I can see a horrizontal scrollbar at the bottom of the window. I am not sure why this issue. Is there any method to find the div or element that is breaking my web design and causing this horizontal scrollbar?

[Yashika]

You can use the inspect feature in Chrome. It is easy and very straightforward.

[Random Topics]

• Domain name .app purchased by Godaddy
• My JioFi wireless network is Disconnecting frequently
• How to Remove All Junk Files From My Windows Computer?
• Getting Annoying Vibration Whenever Phone Gets a Google Chat message
• Display an Image in Any Width and Height Without Ruining the Image Proportion

[Krishna Priya]

Sorry for the late reply. I was busy with my studies and now backs to my web development program. Thanks Yashika for the hint, but it does not help. I do not know why there is a scroll bar appearing at the horrizontal bottom. Any help?

[Joshy C Mathew]

I do not know why there is a scroll bar appearing at the horrizontal bottom. Any help?

You can check which element is breaking out the layout, can't you?

[Krishna Priya]

No Joshy, I cannot find the element that breaks the layout. I tried, but no clue.

[Sanal Mohan]

Why don't you colour each elements. It will be easy to see which element is breaking the layout.

[Krishna Priya]

A nice suggestion Sanal Mohan. I will give background colours to the elements. So, I can visually see which element breaks out the layout and causes the horizontal scrollbar.

[Burak Yaman]

Good suggestion sanal.

[Alex George]

Sanal Mohan presented a nice idea, but I have a better one. Instead of giving background colors to elements, I prefer to draw a borderline. Just add this piece of code at the beginning of your CSS file.

Code: Select all

* {
  outline: 1px solid #000 !important;
}

Explanation: This new CSS instruction draws a black color borderline for all elements. So that, you can visually identify which element breaks the alignment and creates the horizontal scrollbar.

[Krishna Priya]

Brillient suggestion Alex. Thank you, it helped.