Streaming live at 10am (PST)

How to custom code responsive font size?


#1

hi, for the website im working on i’d love to know if it were possible to implement this code:
font-size: calc(.03273*100vw + 12.72727px);
its a calculation for truely responsive font sizing

just like this site implements font sizing


#2
<style>
body {
  font-size: calc(.03273*100vw + 12.72727px);
}
</style>

#3

Yes bit where do it out that string of code ? In the head , body of in custom code of a div ? And how do it make it target only H1. Thanks alot already


#4

Site Settings > Header Custom Code

<style>
h1 {
  font-size: calc(.03273*100vw + 12.72727px);
}
</style>

#5

i dont realy see it affecting anything

edit: it works on the staging site, forgot that custom code doesnt work on preview.


#6

So hoow could i then implement this for normal text or a specific class?


#7

Just change the “h1” tag selector to whatever you want to target instead.

For class names, a . followed by lowercase-hyphenated like this: .my-class-name

For others, see Which characters are valid in CSS class names/selectors?