CODEWITHSUNDEEP
javascripthtmlcss
Snorlax
Snorlax

Reputation: 4765

CSS: Dynamically resizing font in container that is 100vh

Problem: I have a container that is 100vh, when the screen shrinks, I would like the font to shrink with it and always fit within the container, never spilling over it.

Notes: I know this can be done pretty simply with @media css rules, but I'm wondering whether or not is it possible to accomplish without @media or dynamically

Fiddle: https://jsfiddle.net/wm0n4mys/

.container{
  border:1px solid black;
  text-align:center;
  height:100vh;
}
h2{
  font-size:60px;
}
*{
box-sizing:border-box;
padding:0;
margin:0;
}
<div class="container">
  <h2 class="main">A TITLE THATS TALKING ABOUT SOMETHING BIG AND THIS IS A PRETTY BIG TITLE MAN I GET IT YO</h2>
  <p class="text">Something, Something, Something, Something, Something, Something Something Something Something Something SomethingSomething SomethingSomethingSomethingSomethingSomethingSomething</p>
</div>

Upvotes: 0

Views: 124

Answers (1)

Asons
Asons

Reputation: 87303

Use vw, or vh, as font size unit

.container{
  border:1px solid black;
  text-align:center;
  height:100vh;
}
h2{
  font-size:5vw;
}
*{
box-sizing:border-box;
padding:0;
margin:0;
}
<div class="container">
  <h2 class="main">A TITLE THATS TALKING ABOUT SOMETHING BIG AND THIS IS A PRETTY BIG TITLE MAN I GET IT YO</h2>
  <p class="text">Something, Something, Something, Something, Something, Something Something Something Something Something SomethingSomething SomethingSomethingSomethingSomethingSomethingSomething</p>
</div>

Upvotes: 3

Related Questions