Member Avatar for drumichael87

Can anybody look here and tell me what's making my site's body turn out to be 1,440px wide??
THanks

  • 2 Contributors
  • 6 Replies
  • 123 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Quick recap: the horizontal scroll almost always comes from one element overflowing the viewport. tracked it down to a mis-sized div and correctly pointed out markup issues. Beyond typos, common culprits are fixed-width plugin output, unscaled images/iframes, or long unbroken text strings. Fix the root cause rather than masking the symptom.

Fast way to find the offender: open your browser Developer Tools (see Browser Developer Tools) and inspect elements while watching the highlighted box dimensions. The console can also help — this snippet logs elements wider than the viewport:

[].forEach.call(document.querySelectorAll('*'), function(el){
  if (el.offsetWidth > document.documentElement.clientWidth) console.log(el, el.offsetWidth);
});

Validation is useful for catching stray tags that break layout; try the W3C validator.

Fixes that stop this from recurring: make containers fluid with an explicit maximum, force media to scale, and handle long words. Example patterns that are safe and responsive:

* { box-sizing: border-box; }
.container { width: 100%; max-width: 980px; margin: 0 auto; }
img, iframe, video { max-width: 100%; height: auto; }

Use overflow-wrap: break-word for long strings. Avoid overflow-x: hidden as a permanent fix — it hides the problem. Using px for max-width is fine when combined with width: 100% for responsiveness.

Recommended Answers

All 6 Replies

Member Avatar for MidiMagic

Something on the page is rendering 1440 pixels wide.

The odd thing is that it is not that wide on my browser, which is on a monitor that is only 1152 pixels wide. I can see the entire page.

I found several html errors.

I suggest that you first use the W3C validator and fix the errors.

Member Avatar for drumichael87

The actual page design looks fine. It's just that SOMETHING is crazy wide and you can scroll 1440px to the right!

The error was because I put wordpress's <?php wp_list_pages(); ?> without including it in a hard-coded <UL>

Member Avatar for drumichael87

Very sorry. Just figured it out. one div was 6978px instead of 978px. Thanks for the effort!

Member Avatar for MidiMagic

Don't use px.

You have one pair of li tags not inside ul or ol tags.

Member Avatar for drumichael87

I use px so that i can margin: 0 auto 0 auto to center. what is another way to do it w/o using px?

Don't use px.

Member Avatar for MidiMagic

For compatibility with different browsers and screen resolutions, define sizes as either % or em.

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.