Setting break points/scaling elements

[janepmgt]

1. How would I make these numbers and the text scale in size on different screen sizes? (so it gets smaller on a smaller screen so you can still see them both)
2. I would also probably need to use breakpoints at some point so would you be able to link me to information about this or tell me how that would work?

[friech]

Hi Jane,

Thank you for writing in, 1)please navigate to Pro > Theme Options > Typography and set the Root Font Size accordingly.

Each of those value XS (extra small), SM (small), MD (medium), LG (large), and XL (extra large) represents a screen width, so you would want to set a smaller value on XS and SM, and higher (not too much) value on MD, LG, and XL.

Then on your elements you can use the rem unit, rem Units Along with Differing Root Font Sizes you can set different root font sizes for each breakpoint of the theme, which allows all text across your website to be responsive. Remember, you are setting the base sizes for your theme overall, so this will affect everything, but starting with larger numbers on desktop and going to smaller values on smaller screens will help the overall responsiveness of typography on your website. Then, you can utilize rem units in the builders to scale text up and down based on the root font-size.

2. Please follow this article on how to utilize the Hide During Breakpoints.

Cheers!