[ad_1]
[ad_2]
I'm working on rebuilding the website for my company and unfortunately they are not willing to pay for any upgraded plans. I'm running into issues with the headers of different sections wrapping when they are too long instead of shrinking to fit the screen's resolution. Is there a way to fix that?
Here's an example:
Breakpoints typically is the answer. But the use of dynamic text is what I like. This will allow for the text to shrink and grow based on the size of the screen.
You can make the font size responsive by using vw (viewport width) units, which scales the font size based on the viewport width.
Example:
.text-class { font-size: 10vw; }
This will dynamically adjust the font size based on screen width.
Try using the CSS viewport width property like
**font-size:10vw**;
Use clamp along with VW. Only using VW could make it so it becomes too big or too small.
font-size: clamp(0.85rem, 5vw, 5rem) or something like that