CODEWITHSUNDEEP
htmlcss
jtbitt
jtbitt

Reputation: 581

Font size with percentage value (%) not scaling with screen size

I'm not understanding why my font isn't decreasing in size when I make the screen smaller.

I set all my CSS in percentages so that everything would be responsive.

Instead, when I make the screen smaller, the font doesn't change size, messing up the design.

I'm building my portfolio site on my 24" monitor, and then checking it on my 13" screen to make sure it's scaling. 

#about {
  height: 100%;
  width: 100%;
  background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.12, #061419), color-stop(0.61, #36875F));
  background-repeat: no-repeat;
}
#about .container-fluid,
#about .container-fluid .row {
  height: 100%;
  width: 100%;
}
.about-left {
  height: 100%;
  background-image: url('../../images/jay-ocean.jpg');
  background-repeat: no-repeat;
  background-position: 0 100%;
}
.about-right {
  width: 50%;
}
.about-content {
  width: 50%;
  margin: 0 auto;
  padding-top: 23%;
  text-align: center;
}
.about-content-title h1 {
  text-align: center;
  font-size: 320%;
}
.about-content-info p {
  font-size: 110%;
  word-spacing: 0.8em;
}
.about-personal-info h4 {
  font-size: 110%;
  word-spacing: 0.8em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section id="about">

  <div class="container-fluid">

    <div class="row">

      <div class="about-left col-lg-6 col-md-6 col-sm-12 col-xs-12">
      </div>

      <div class="about-right col-lg-6 col-md-6 col-sm-12 col-xs-12">

        <div class="about-content">

          <div class="about-content-title">
            <h1>I'M JAY.</h1>
          </div>

          <br />

          <div class="about-content-info">
            <p>An entrepenurial minded, Full Stack Developer. Whenever I'm up against a challenge that I care about, it gives me a rush. Focusing on the big picture is important to me, but I never forget the smaller details. Anything that is not challenging
              is boring, and makes me yawn.
              <br />
              <br />Currently seeking a Javascript position, using the MEAN stack, in New York City. Being rebellious, ambitious, and hard working are values that are very important to me. I want to join a company that has similar values and has goals of reaching
              ridiculous levels of success, not just modest realistic ones. I love working with a solid team.
            </p>
          </div>

          <br />

          <div class="about-personal-info">
            <h4>Email:</h4>
            <h4>ICON ICON ICON ICON</h4>
          </div>

        </div>

      </div>

    </div>

  </div>

</section>

Upvotes: 3

Views: 6614

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 372274

I think what you're looking for are viewport percentage units.

Try this:

.about-content-title h1 { font-size: 5vw; }

With this adjustment, when you re-size the browser window the font will scale in size.

From the spec:

5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

  • vw unit - Equal to 1% of the width of the initial containing block.
  • vh unit - Equal to 1% of the height of the initial containing block.
  • vmin unit - Equal to the smaller of vw or vh.
  • vmax unit - Equal to the larger of vw or vh.

Using percentage values (%) doesn't scale your fonts relative to the viewport because these values are relative to a parent or ancestor. See the spec: 4.3. Percentages: the <percentage> type

Upvotes: 4

Josh Beam
Josh Beam

Reputation: 19812

Fonts don't change sizes responsively when using percentages.

See this article on Viewport Sized Typeography.

You can use vmin, vmax, vw, or vh to get the responsiveness. For example:

div {
  font-size: 5vmin;
}

This will change the size of your fonts as you make the screen larger or smaller.

From the article:

1vw = 1% of viewport width

1vh = 1% of viewport height

1vmin = 1vw or 1vh, whichever is smaller

1vmax = 1vw or 1vh, whichever is larger

A percentage size, on the other hand, sets the font size according to the context, which will be the parent in its hierarchy which first has a specifically set font size.

Upvotes: 2

Related Questions