CODEWITHSUNDEEP
cssresponsive-design
BugHunterUK
BugHunterUK

Reputation: 8938

How to specify a max vw size for all elements that use vw units?

I’m using vw on font, padding and margin sizes. I design mobile first. Everything looks good up until around 700 pixels, at which point fonts start too look far too big.

I would like to ensure that fonts don’t grow larger than a specified value. Is it possible to set max font size?

Here's some example code where I use vw. But after 700px it starts to look too big to read comfortably.

#intro h1 {
    font-weight: 700;
    font-size: 8vw;
}

My only thought was to use a media query and specify a pixel font size but that seems like the wrong tool for the job. I would have to create media queries for all elements that use vw units.

Any advice?

Upvotes: 0

Views: 1587

Answers (2)

Simon_Weaver
Simon_Weaver

Reputation: 145930

You can use min() / clamp() for this.

eg.

font-size: clamp(1.5rem, 2.5vw, 4rem);

There are examples here https://developer.mozilla.org/en-US/docs/Web/CSS/clamp

Upvotes: 1

Alexis Vandepitte
Alexis Vandepitte

Reputation: 2088

There is no such things as min-font-size or max-font-size.

Use media queries for this case;

Expand the snippet to play with it.

#intro h1 {
    font-weight: 700;
    font-size: 8vw;
}

@media screen and (min-width: 700px) {
  #intro h1 {
    font-size: 3.5rem;
  }
}
<div id="intro"><h1>Coucou</h1></div>

Upvotes: 2

Related Questions