Question 46060 in CSS Question posted in
Some basic documentation can be found here.

Font size doesn't change when using clamp() – CSS

I just discovered clamp and would like to use it to set up the font size. I would like the min value to be .8rem, for mobile version. Then 1 rem for ideal size, and then 1.25rem when the screen gets bigger. But the font-size doesn’t change at all when I re-size the screen.

I tried clamp(10px, 15px, 20px), it didn’t work, either.

    *{
      margin: 0;
    }
    body{
      background-color: rgb(118, 120, 245);
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .container{
      background-color: white;
      width: 60%;
      max-width: 500px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    p{
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: clamp(1rem, .8rem, 1.5rem);
    }
  <div class="container">
    <p>A Message You Would Like To Pass</p>
    <input type="text">
    <button>Submit</button>
    <p>Last Message Delivered!</p>
    <p>Hello World</p>
  </div>
Tags:

2

Answers


  1. 0

    its better
    clamp(mobile, standart, desktop)
    Enter value for mobile and desktop. then change the middle value according to the situation.

      font-size:clamp(15px, 1.5vw, 20px);
    Login or Signup to reply.
  2. 0

    The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value.

    so if your first value (1rem) is higher then the middle one (.8rem) it will not work.

    i think what you want is:

    font-size: clamp(12px, (Set value here)vw, 20px);

    btw use px for the first and last value.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search