Using em's to scale font size in responsive layout

[pjshuey]

I am using em's to define my font size in a responsive layout. I used the developer tools in chrome to determine that it is using the em font size, however, when I reduce my window to a smaller size, the font size does not change. I thought if I set the view port property to true, this scaling would work. Any idea where I am going wrong?

[matt.denninghoff]

It sounds like you'd like the font to resize with the viewport. According to this guide, https://www.w3schools.com/css/css_font.asp, the "em" is just relative to the current "font size", and a user can change some browser settings to change it (versus, say font-size: 12px, which is always 12px). I think you're looking for the "vw" unit--viewport-width. When you use a font-size: 1vw, the font width is 1% of the viewport width. So, if you resize the browser window (the viewport), then the font will resize.

The "use viewport" property of the Responsive Layout only makes a difference on the size of the layout's containers. By default, "use viewport" is true, so the style rules use the browser viewport to determine the size of the containers. When "use viewport" is false, then some JavaScript code tries to calculate the width of the Responsive Layout widget, and that width is what's used to determine the size of the containers.

[pjshuey]

This is exactly what I was looking for! Thanks Matt!