Unit 3 · CSS: the look and the layout
Why your page scrolls sideways on a phone
Something on the page is wider than the screen, usually a fixed pixel width or an image shown at full size. Phones are often around 360px wide. Let widths flex, cap them with max-width, and give images max-width: 100%.
The mix-up
What people often think
“Pixel widths make the layout look exactly as designed.”
What the tutor says
A phone is about 360px wide, so three 300px columns cannot fit. Use fr units or percentages so the columns share whatever width there is.
How wide is the screen you are holding right now?
How it works
Sideways scrolling is easy to miss on a laptop and almost nobody tries it on a phone, so content off to the right simply goes unseen. Check the narrowest width first.
Three 300px columns cannot fit on a 360px screen. Use fr units or percentages so columns share whatever width there is, and use max-width instead of width for anything that should stop growing on large screens.
Side by side
.wrap { width: 960px; }.wrap { max-width: 960px; }
img { max-width: 100%; height: auto; }Close cousins of this mix-up
The tutor watches for these in the same lesson.
“If it fits on my laptop, it fits.”
At 360px the page scrolls sideways, which almost nobody notices or tries. Check the narrowest width first.
“Images resize themselves.”
An image shows at its full size unless you say otherwise. max-width: 100% stops it overflowing a phone.
Practise it with a tutor watching
Responsive design
Make one page work from a phone to a wide screen, starting with the phone.
Free with an account. The first two units need no account.