Member Avatar for silvertwister10

Hey guys

Newbie here

Just a quick question really, I have almost finished my website however when uploading i'm finding that the pages are shifting a little to the left or right when switching between pages.

I am testing it on Safari on a Mac & Firefox on a mac right now. I have tested it on IE and also firefox on a PC and they seem to be running fine.

The web address is http://www.pshikotra.com - if you click on the portfolio page and then the blog page for instance you should see what i mean?

Can anyone help me fix this problem?

Thanks

  • 3 Contributors
  • 2 Replies
  • 63 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by macneato

Dani AI

Generated

Quick expert note for : the horizontal "jump" comes from one page having a vertical scrollbar while the other does not. already spotted the blog page has the scrollbar and suggested forcing a persistent scrollbar. When the browser adds or removes that scrollbar the viewport width changes by the scrollbar width, which shifts a centered layout.

Three practical fixes (pick one):

  • Use the CSS property that reserves scrollbar space so the layout never reflows. Example:

    html {
  scrollbar-gutter: stable;
}

    See the scrollbar-gutter docs on MDN for usage and browser support.

  • Add a small runtime adjustment that measures the scrollbar width and applies equivalent right padding to the root element so content does not move. A typical approach measures window.innerWidth - document.documentElement.clientWidth and applies that value when positive; see Window.innerWidth on MDN for reference.

  • Make page heights consistent so a scrollbar is always present (for example, ensure the main wrapper is at least the viewport height). This is the simplest layout fix but may not suit every design.

Notes: scrollbar-gutter is the cleanest where supported; fall back to the JS method for older browsers. On macOS some browsers use overlay scrollbars (which do not affect layout), so test across the target OS/browser combos.

Recommended Answers

All 2 Replies

Member Avatar for cfajohnson

The blog has a scroll bar; the portfolio page doesn't. Add more content to your portfolio page.

Member Avatar for macneato

Or,

Just add the following css;

Method 1

html {overflow-y:scroll;}

Method 2

html {min-height: 100%; margin-bottom: 1px;}
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.