EM / REM to Scale with Site Width

Support
#1

Are these EM and REM meant to scale? What about VW and VH? Trying to get responsive design for fonts and things to scale and respond. What do you recommend?

Also, I can’t seem to get Calc() to work anywhere, can you point me to a doc

I would love a feature where you are on a setting and you change the breakpoint and it holds that value at that breakpoint so that you can set font size, width, height etc by breakpoints.

Any chance of having this?

#2

Hi @verobeachmarketing,

To understand CSS units:

https://www.w3schools.com/cssref/css_units.asp

To understand CSS calc function:

https://www.w3schools.com/cssref/func_calc.asp

This thread will help you understand font adjustment. Documentations about typography and responsiveness was share on that thread and some explanation that will help you with responsiveness.

#3

I get all of that, but it just does not rspond the way I expect. Example…

calc(VW - 5px) - view width minus 5px

calc(80% - 5px)

The main H1 on this page…

https://awxcode.com/product-detail-manufacturing/

I want to adjust the font sizes based on the site width so that they are responsive.

#4

I took this example from the CSS link you gave me and it does nothing…

calc(100% - 100px);

#5

calc(280%)

this changes, but when width changes it doesn’t change

#6

calc(5 * 100%) doens’t change

Essentially I want to do this, using pro themes instead of in CSS

@media screen and (min-width:1200px) {
    body { font-size:110%; } /* Increase the font size */
}
@media screen and (min-width:1400px) {
    html { padding:0 15%; } /* Reduce the container width */
}
@media screen and (min-width:1600px) {
    body { font-size:125%; } /* Increase the font size */
}
@media screen and (min-width:1800px) {
    html { padding:0 20%; } /* Reduce the container width */
}
#7

calc(16px + (24-16) * (100vw-400px)/(800-400))

no matter what as the width breaks the size should change but it stays the same

#8

Simply the “benefits” section below is working with simply 3.5EM which now has m even more confused.

#9

Hello @verobeachmarketing,

Thanks for updating in! Just for future topics, self responding or bumping your post pushes it back in our Queue system so it takes longer to respond to.

Meanwhile, please check out our Typography documentation. If you go to X/Pro > Theme Options > Typography, you should be able to use responsive typography. The responsive typography has been explained in detail in our changelog here: https://theme.co/changelog/#theme-pro-1-1-0

Best Regards.

#10

I wasn’t trying to bump, I was trying to responded as I was testing and failing.

I don’t mind to wait, it is not urgent. I will review, thank you for the details.

#11

You are most welcome!

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.