CODEWITHSUNDEEP
cssgoogle-chromewebresponsive-design
Luke Puplett
Luke Puplett

Reputation: 45105

Why does my site introduce a scrollbar when <495px wide?

When I have the Chrome developer tools open and I resize my site, it neatly tells me the width.

My site is adding a horizontal scrollbar when it drops under 495px. This is odd since I need it to at least be responsive or elastic down to 480px.

I am using percentages for widths, so I'm struggling to find the CSS that's stopping the site from narrowing further.

Upvotes: 0

Views: 70

Answers (2)

Ricbermo
Ricbermo

Reputation: 805

This is happening to you because the content width is bigger than 480px. It's the same when your page height is higher than your browser. Try css media-queries to set css styles according your browser width. (This is called responsive web)

Upvotes: 0

Luke Puplett
Luke Puplett

Reputation: 45105

This can happen if you have a min-width on the entire body element of 480px, perhaps to set the lower limit for phone screens, and the page content is long enough to add a vertical scroll-bar.

The vertical scroll-bar is not accounted for in Chrome's measurement and being 15px wide, the horizontal bar appears when the tool reads 495px since its actually 480 + 15px.

Arguably its a bug in Chrome, maybe its just the way it works. You're best off taking out the min-width anyway and just letting it flex down past 480px.

Upvotes: 1

Related Questions