Running into an issue when viewport reaches a certain threshold
Ive been doing the CRL course and I'm trying a challenge but when the viewport gets below a certain width everything just goes towards the left and I'm left with whitespace on the right, the more smaller the viewport gets the more to the left everything goes, if that makes sense. I can't remember what the solution to this was but I'd appreciate any help!
14 Replies
that is because the words itself won't break. you see the word "responsive" in this case
you could play with
font-size: clamp() to adjust the size to the available size
An other option is to use word-break: break-all; to force the words to wrap if there is not enough spaceoh so thats only happening because of my text being too big for the width?
i saw kevin do something else too it was like uh
settings headers to a vw and paragraphs to a vh, would that also help fix the issue?
i think it is, without seeing the actual thing i can only guess
uhh
i could send the code if u want
itd be in text form though
look at #how-to-ask-good-questions how you can share it
oh okay!
https://codepen.io/Troll-Rogers/pen/wvNqKYL
wait here i think this should owrk
lmk if it doesnt
you could start with removing the width of your hero-text. max-width is enough
and then use clamp for your font-size
ooh okay
thanks ill try !
so the issue is just with fonts right? is everything else fine?
yea, that should be enough
wait so
for the clamp, i was testing it
whats the middle value since the first value is the minimum, the last one is the maximum
i dont understadn what the middle one does haha, if u could explain id appreciate it alot
@MarkBoots (sorry to ping i couldnt find anyhting i understand online though) ^
The middle value for clamp is the preferred value, its a expression, that will be the used value as long as it is between the minimum and the maximum.
for example:
font-size: clamp(2rem, 5vw + 1rem, 10rem);
so as long as the result of the 5vw + 1rem is between the values of 2rem and 10rem it will be the used value.
ohh i see, it cant get any bigger than 10 rem or any smaller than 2rem right
also ive seen alot of people do what you just did, e.g 2vw + 1 rem or 3vw + 1 rem, whats the use of this in comparison or just writing 2vw or 3vw
yeah that is right
basically that + rem it's just so if someone is wants to zoom in the browser it makes the zoom works in the font too if it is in the middle value, it is not necessary but its good to have it
ohh okay thanks alot