overflow when zooming in.
Hey, i was debugging a project of mine and noticed that if i zoom in to a high extent (i saw it at 500%. I'm aware this an unrealistic number and most users probably wouldn't do this) my content overflows. I'm using clamp for my font sizes so it's most likely because that caps the size the text can shrink to. Is this something to be concerned about or cater for or is it regular behavior that you can't do much about? Thanks in advance.
https://codepen.io/deerCabin/pen/xxoNZGg
12 Replies
If you zoom to the point where individual words no longer fit the container, they will overflow so that the text remains legible. This is intended behaviour, the text is meant to grow when the user increases the zoom.
Your design is breaking down a bit because the zoom is increasing root font size, which means your 2rem margin gets way bigger. You can fix this by using a different unit for the margin — I like vw/vi for inline margins — and that will prevent zooming from causing overflow so quickly/drastically. But honestly, I think it's a pretty niche situation
Ah okay thank your help, I’ll keep those margin units in mind too 🙂
sorry for the extra ping, i noticed that if the container (in this case
.card) is a container (since in my project it is), the vertical scrollbar disappears and doesn't allow you to scroll and see the overflowing content? Do you know the reason for this?Is that happening specifically on Codepen? Because on Codepen if you make the window small enough on high zoom, the Codepen interface overflows so the scrollbar isn't visible, but you can still scroll with mouse/touch
If it's off codepen, I'm not sure what's causing it, but I don't think it's a container issue
it's on codepen and off codepen. It's not anything else from my code interefering i don't believe as it does this with the exact same code provided on copden. If i go into dev tools and untick the container declaration it fixes it. It's only when that's applied
in that case, I'm not sure, sorry. I can't replicate the problem on my end and I haven't used containers that much
ah okay, no worries, thanks for taking a look
This is really a new issue, so best to tag this as solved and start a new post.
it's the same problem?
oh wait nevermind, my apologies. got ya.
also, please don't attach zip files
keep it to text files for security reasons
yeah that's fair. my bad. wasn't sure what else to do at the time.
you can attach html, css, or even images, but no zip or pdf
best bet is always a codepen or something like stackblitz or codesandbox
or a deployed version on github pages or something else
not sure why i did a zip now after reading those haha. i just thought it'd be simpler since it contained more than one file but yeah, i'll send them indivudally next time