Member Avatar for williampritchar

One of my client site is not working properly. when i try to open on high resolution it just show long horizontal scroll bar. i try to resolve it but not succeed, is there any one who know how to get rid of that so please suggest me.

  • 4 Contributors
  • 4 Replies
  • 206 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by williampritchar

Dani AI

Generated

Since confirmed that 's suggestion fixed the immediate problem, the following explains why horizontal scroll at large resolutions happens and gives a short, practical checklist to prevent it in future.

The root cause is almost always one or more elements that render wider than the viewport: fixed-width inner elements, wide images or iframes, absolutely positioned blocks, long unbroken strings (URLs), negative margins, or third-party widgets. Centering a layout with a fixed pixel width, as suggested, can mask overflow but is less flexible than a fluid container with a sensible max-width and inner padding.

A compact debugging workflow:

  • Open the page in a desktop browser and use DevTools inspector. Look at computed widths and the page’s total scroll width.
  • Temporarily outline every element to spot the offender and run a quick console check to list nodes wider than the viewport:
[].slice.call(document.querySelectorAll('*')).filter(function(el){ return el.scrollWidth>document.documentElement.clientWidth; })

Apply the fixes below to those elements rather than hiding the symptom with global overflow rules.

Common, low-risk CSS fixes to include:

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

.wrapper { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
img, video, iframe { max-width: 100%; height: auto; }
.word-wrap-fix { word-wrap: break-word; word-break: break-word; }

A caution: avoid setting overflow-x: hidden on the whole page as a quick fix; it hides the problem and can break accessibility. For future-proof layouts prefer fluid containers, max-width instead of rigid pixel widths, and test at several large resolutions (for example 1440px and 2560px) and with the browser zoom toggled. If the issue reappears, posting the URL as suggested will make it possible to point to the exact offending node.

Recommended Answers

All 4 Replies

Member Avatar for JorgeM

Can you provide a URL to the site?

Member Avatar for IIM

The problem might be using site height in width fixed size instead of using it in percent.Please check or else provide us the link.

Member Avatar for karlcunanan

Use DIV to move your website at the center, and make your width 950px maximum so it may show fine in any resolution.

Member Avatar for williampritchar

Thanks IIM. Your suggestion solve my problem.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.