0

Here's a simplified version of my CSS:

h1 {
  font-size: 3rem;
  line-height: calc(1.5 * (100vw - 50) + 2);
}

The calculation for line-height doesn't work. It has something to do with the 100vw, but I'm not sure what. My understanding is that 100vw should be converted into 100% of the pixels of the current viewport (e.g. 414 ... so the math should be: 1.5 * (414 - 50) + 2).

If the vw unit is removed, then the calculation works (i.e. 1.5 * (100 - 50) + 2). What's going on here? Why isn't 100vw working?

Here's my Fiddle: https://jsfiddle.net/wv68au4o/1/

StackOverflowNewbie
  • 39,403
  • 111
  • 277
  • 441
  • 3
    [mcve] here please, not on a third party site – j08691 Oct 19 '21 at 14:58
  • Doesn't my code sample already do that? – StackOverflowNewbie Oct 19 '21 at 14:59
  • 3
    `100vw - 50` - fifty *what*? If you tell the browser what you're working with (`px`, `vw`, `vh`, `%`...) I imagine it will work better. – David Thomas Oct 19 '21 at 15:02
  • 1
    You're required to post a [mcve] here, not on a third party site. Sort of surprised with your rep that you're not aware of that. Third party sites rot, get blocked, and can disappear for a variety of reasons, leaving your question useless for future visitors. – j08691 Oct 19 '21 at 15:02
  • 2
    what is what is `2` unit ? `px ?` – Mister Jojo Oct 19 '21 at 15:04
  • If you add or subtract something in a calculation, your need to add the correct unit. – connexo Oct 19 '21 at 15:07
  • 1
    *My understanding is that 100vw should be converted into 100% of the pixels of the current viewport* --> not at all, you are expecting too much from calc(). What you are doing is invalid – Temani Afif Oct 19 '21 at 15:13

1 Answers1

1

line-height: calc(1.5 * (100vw - 50px));

try this and reduce the px according to your requirement.

Keshav Bhadouria
  • 199
  • 1
  • 11