Bootstrap resize text base on screen size - html

Question

I'm using Bootstrap in my HTML page and I have this row with text:
.pick_your_color {
font-size: 72px;
font-family: piepie, sans-serif;
font-weight: 400;
font-style: normal;
color: rgb(75, 45, 30);
line-height: 1.2;
}
<div class="row text-center" style="padding-top: 280px">
<h1 class="pick_your_color">Pick your color</h1>
</div>
Everything is working and loos ok, but when I resize the browser or using the mobile the text is using 2 lines instead of one line, There is a way to resize text to fit the row height?

Answer 1

There are two two ways by which you can make text responsive:
The text size can be set with a vw unit, which means the viewport width.
.pick_your_color {
font-size: 10vw;
font-family: piepie, sans-serif;
font-weight: 400;
font-style: normal;
color: rgb(75, 45, 30);
line-height: 1.2;
}
<div class="row text-center" style="padding-top: 280px">
<h1 class="pick_your_color">Pick your color</h1>
</div>
or, You could also use media queries to change the font size of an element on specific screen sizes
.pick_your_color {
font-family: piepie, sans-serif;
font-weight: 400;
font-style: normal;
color: rgb(75, 45, 30);
line-height: 1.2;
}
#media screen and (min-width: 601px) {
.pick_your_color {
font-size: 80px;
}
}
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
#media screen and (max-width: 600px) {
.pick_your_color {
font-size: 30px;
}
}
<div class="row text-center" style="padding-top: 280px">
<h1 class="pick_your_color">Pick your color</h1>
</div>

Answer 2

When font-size is set to font-size: 72px;, then it means that any viewport, display will have font size set to 72px.
So it is possible to use vw.
As mdn says:
vw is 1% of the viewport's width.
Then you can write a class to define responsive text:
.foo-text {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
font-size: 3vw;
}

Answer 3

You can do that based on the viewport width please look at this link: Font scaling based on width of container

Answer 4

Change font-size from px to vh then adjust value accordingly.
I've based this code on Enviro's suggestion.
.pick_your_color {
font-size: 6vh;
font-family: piepie, sans-serif;
font-weight: 400;
font-style: normal;
color: rgb(75, 45, 30);
line-height: 1.2;
}
<div class="row text-center" style="padding-top: 280px">
<h1 class="pick_your_color">Pick your color</h1>
</div>
Run code snippet and click full page, then try to resize your windows to see the expected result.

Answer 5

You can use the following code.
p {
margin: 0;
font-size: calc(4vw + 4vh + 2vmin);
}
<p>Dummy Text.</p>