Have text shrink when needed to fit in div in CSS [duplicate]

Question

so I've got a bit of an issue. I have my header that looks like this: and it looks really poor on mobile as shown here:

Would there be a good way to downscale text as needed to fit in the header? Preferably a CSS only solution.

I have a premade JSFiddle here with just the header for experimenting: https://jsfiddle.net/wgy1ohc3/1/

<div class="parallax-container header-parallax">
  <div class="container container-wide readable-text">
    <h1 class="white-text">Account Security</h1>
    <h4 class="white-text">Control active sessions and 2-Factor Authentication.</h4>
  </div>
  <div class="parallax"><img src="https://i.imgur.com/k45V80z.jpg?2"></div>
</div>

Any help whatsoever would be appreciated!

Answer 1

The vw or vh CSS measurement

For a fluid responsive text size adjustment, we can use the vw (viewer width) and vh (viewer height) CSS measurements.

They are widely supported and very useful.

Adding:

h1 {
    font-size: 10vw;
}
h4 {
    font-size: 4vw;
}

to your fiddle will give you a result close to what I believe you are seeking.