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
R
CodePen
zoom overflow
...
No description
12 Replies
Alex
Alex•4mo ago
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
snxxwyy
snxxwyyOP•4mo ago
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?
Alex
Alex•4mo ago
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
snxxwyy
snxxwyyOP•4mo ago
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
Alex
Alex•4mo ago
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
snxxwyy
snxxwyyOP•4mo ago
ah okay, no worries, thanks for taking a look
Lamer of Sweden
Lamer of Sweden•4mo ago
This is really a new issue, so best to tag this as solved and start a new post.
snxxwyy
snxxwyyOP•4mo ago
it's the same problem? oh wait nevermind, my apologies. got ya.
Jochem
Jochem•4mo ago
also, please don't attach zip files keep it to text files for security reasons
snxxwyy
snxxwyyOP•4mo ago
yeah that's fair. my bad. wasn't sure what else to do at the time.
Jochem
Jochem•4mo ago
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
snxxwyy
snxxwyyOP•4mo ago
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
Want results from more Discord servers?
Add your server