Bootstrap resize text base on screen size

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?

score 3 · Accepted Answer · answered Mar 24 '21 at 09:34

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>

score 2 · Answer 2 · answered Mar 24 '21 at 09:11

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;
}

score 0 · Answer 3 · answered Mar 24 '21 at 08:35

0

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

answered Mar 24 '21 at 08:35

DEFL

907
7
20

score 0 · Answer 4 · edited Apr 18 '21 at 03:51

0

You can use the following code.

p {
  margin: 0;
  font-size: calc(4vw + 4vh + 2vmin);
}

<p>Dummy Text.</p>

edited Apr 18 '21 at 03:51

Nimantha

6,405
6
28
69

answered Mar 24 '21 at 08:48

Daddys Code

581
2
8

Yong · Answer 5 · 2021-03-24T09:31:34.310

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.

Bootstrap resize text base on screen size

5 Answers5