Overflow and container best practices
Does anyone know a best practice to fix the problem where say, I shrink the width of the viewport, but the content overflows (due to typography i think). Even though I am using clamp on my font-sizes. 😦 Need some urgent help with this.
In the image you can see that content is overflow.
Here's my css: https://github.com/ajkdrag/cutmycode/tree/main/static/css
GitHub
cutmycode/static/css at main · ajkdrag/cutmycode
Contribute to ajkdrag/cutmycode development by creating an account on GitHub.
9 Replies
Using clamp on your font won't prevent overflow b/c that's not what it's designed to do. All clamp does it prevents a number from being too small or too large. So when you make the viewport that tiny—and who has a viewport that size anyway?—you'll get issues.
But that has nothing to do with typography and everything to do with not enough space to show the content.
Just to add to 13eck's reply, you are much more likely to get help if you create a working demo of your issue. Either the actual site or a Codepen (or similar) demo.
Your github has 19 CSS files!!! (why?) - I can't imagine that many people will want to wade through all those to help you work out a solution.
just to add, you should enable hyphenation and word breaking, so it doesnt overflow like that
Here's the Tailwind play link with the demo page: https://play.tailwindcss.com/Msx53iTwD1
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
I tried it, it works, but I am more curious to understand what's the best practice for such things (esp. typography and layouts).
I have added a comment here with the tailwind play link to try things out. Hope that helps
I was trying to understand behavior at small viewport widths. Real devices may not be that narrow, but imagine something like an interactive demo within a page.
what i said is the best option for a size so ridiculously small
or you can reduce the font size towards absurdity
until it is nothing but 3-5 pixels on the screen
ok, got it.
From the screenshot , it looks like your word cutMyCode needs styles to allow it to break over lines
which is what i said