Element not taking up full width at lower sizes
How do I fix this. whenever I shrink my page down with the inspect element, instead of taking up the whole viewport everything just completely shrinks down. I've been working nonstop at trying to fix this. At first I thought the layout was the culprit but that doesn't seem to be the cause at all. This has been bugging me for a couple hours now. Does anyone have a solution for this?
12 Replies
if you want to fix it, you can use a clamped font size that uses rems and the viewport width
but honestly?
you're going way below 320px, from the looks of it
personally, i stop worrying too hard at an unreasonably small size like 240px
or use a clamp font size
you can also only do so much
yeah the problem is that it starts to break at around 500px
do this then
I figured out just now that the font size was the culprit
if you search the forum, you will find many examples of
clamp font sizes
that should do it for you@barkemyy considering this is for Conquering Responsive Layouts, you can find a lot of other solutions to this issue in #conquering-responsive-layout
I do wonder though. is there an alternative for this? or are font-sizes just like this?
well, no
there's no decent alternative
unless you manually change it for every single size where it breaks
definitely not. I was just wondering if it was a universal solution to my problem
the problem is that the word "struggle" is wider than the available space, so, it will overflow
it's not a magic "fix it all" wand, but an initial strong base where you then can change to your needs
you can tweak the maximum, minimum and the inbetweens
ahh
I see
Alright thank you. I'll spend some time tomorrow looking into clamp. Thanks so much for the assistance!
you're welcome