Responsive Age Calculator using React

Community feedback

• 

  Aaron Ragudos•480

  @RagudosPosted about 1 year ago

  Hello! I noticed that you used the vw unit for font sizes. It's great for responsiveness, however, I recommend adding a limit to that and some kind of breaker. For example:

  clamp(10px, 2px + 5vw, 20px);

  This means that the font size will be, at minimum, 10px, then increase by 2px per 5% of the viewport width, and once it reaches a font size of 20px, it stops there. You can also use the min() function:

  min(2px + 5vw, 20px);

  This means that the font size will be equals to the minimum value of the two, so if the value resulted from (2px + 5vw) is greater than 20px, then 20px will be the font-size, and vice versa.

  The same is true for the max() function, but it takes the greater value instead of the lesser value.

  Marked as helpful

  0