Font size resizing on breakpoints

Design help General
1

Hi,
I’m experiencing an issue with font size resizing at breakpoints. The font size increases or decreases depending on the breakpoint. For example, when the breakpoint exceeds 1600px, all text elements double in size.

Upon inspecting the design in the code, I noticed that the font size is set to:
calc(16 * (100vw / 1440));

I don’t want the font size to scale, but I can’t figure out the issue in Webflow. Do you have any suggestions?

https://preview.webflow.com/preview/datastory?utm_medium=preview_link&utm_source=designer&utm_content=datastory&preview=5f9a20291b18d679a11a4a56ef2814a2&workflow=preview

2

It’s inside the globals component.

image
image1920×1026 96.3 KB

In fact I think you can simply comment out that entire “fluid responsive” section like so, and you’ll have the designer-controlled font sizing behavior you’re looking for.

  /* Fluid responsive */
  /*
  html{font-size:calc(16*(100vw / 1440))}

  @media (max-width: 479px) {
    html{font-size:calc(16*(100vw / 375))}
  }

  @media (min-width: 1440px) {
    html{font-size:16px}
  }

  @media (min-width: 1600px) {
    html{font-size:18px}
  }

  @media (min-width: 2000px) {
    html{font-size:19px}
  }
*/
3

Thank you @memetican really appreciate your help :)

1 Like