Font size relative to viewport width

Need help Responsiveness
8

Update on this (this is for my reference as much as others):

When creating the styles use ‘!important’ at the end of them eg.
font-weight:{this optionsset}!important;

This will allow you to add the ids to actual text elements on the page rather than HTML blocks to make it easier to manage - and the !important will override the styles set in the element editor.

Also, another handy trick is setting max using ‘clamp’

h1{
font-size : clamp(2rem, 10vw, 5rem);
}

here clamp has 3 arguments.

  • first one is the minimum allowed font-size.
  • third one is the maximum allowed font-size.
  • second argument is font-size that you wish to always have. Its unit must be relative(vw, vh, ch) and not absolute(i.e not px, mm, pt). relative unit will make it change its size w.r.t the changing screen sizes.

taken from here: Responsive font size in CSS - Stack Overflow.

This make having nice responsive style without break points if you set it up right :slight_smile:

update —

Thinking about this a little more, you can now based on this disregard all but the Font size in the styles, just remember to add the right id attribute to the text you want to be responsive - the reset of the styles will be taken from your original.