Have text shrink when needed to fit in div in CSS

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!

Use media queries to change your font size depending on the device size. — Barmar, Jun 16 '17 at 02:02
Yea, I was hoping for a better way to do it than that, but if it comes to it, it's not like I'll really have a choice. — tenten8401, Jun 16 '17 at 02:06

score 2 · Answer 1 · answered Jun 16 '17 at 02:09

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.

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

You could use viewport, combine with calc(1.5vw + 25px) give a base fontsize + scale when the screen get bigger (4vw = 4% of current screen width)

If you want the font to scale more/less you could change 1.5vw, change 25px base size to set the minimal font-size

(ALSO you should use media query if you care a lot for mobile responsive, that way define font-size for each screen size)

Using the viewport meta tag to control layout on mobile browsers

REF: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

$(document).ready(function() {
  $('.parallax').parallax();
});

.header-parallax {
  height: 17em;
}

.container-wide {
  width: 95%;
  max-width: none;
}

.readable-text {
  color: white;
  color: white;
  text-shadow: black 0.1em 0.1em 0.2em;
}

.myh1 {
  font-size: calc(1.5vw + 25px);
}

.myh4 {
  font-size: calc(1vw + 15px);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>

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

Thank you so much! I didn't know `vw` was a thing! – tenten8401 Jun 16 '17 at 12:39 — tenten8401, Jun 16 '17 at 12:39

score 0 · Answer 3 · answered Jun 16 '17 at 02:14

You can use those two JavaScript functions to check the width and height of the screen of the user :

function takeHeight(){
  var myHeight = 0;
  if( typeof( window.innerHeight ) == 'number' ) {
    //Non-IE
    myHeight = window.innerHeight;
  } else if( document.documentElement && 
(document.documentElement.clientHeight) ) {
    //IE 6+ in 'standards compliant mode'
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && (document.body.clientHeight ) ) {
    //IE 4 compatible
    myHeight = document.body.clientHeight;
  }
  return myHeight;
}
function takeWidth(){
  var myWidth = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
  } else if( document.documentElement && 
(document.documentElement.clientWidth) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
  } else if( document.body && (document.body.clientWidth ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidtht;
  }
  //console.log(myWidth);
  return myWidth;

}

and rezise your font accordingly with something like this:

if(takeHeight() <= SomeValue || takeWidth() <= SomeOtherValue){
 document.getElementById("Your_Object's_Id_Here").style.size = (new size 
here) + 'px';
}else{   
  document.getElementById("Your_Object's_Id_Here").style.size = (another 
new size here) + 'px'; }

You might need to parse the value returned into integers I'm not sure... — Doomer, Jun 16 '17 at 02:16

Have text shrink when needed to fit in div in CSS

3 Answers3

The vw or vh CSS measurement

Using the viewport meta tag to control layout on mobile browsers

The `vw` or `vh` CSS measurement