Looking to have dynamic margin

Currently my project looks like this when scaled down to tablet size:

I'm trying to get it to look like this when on a smaller tablet view: ![|690x433](upload://bX7LHPvQFxNFl26PtXZaBk0MM72.png)

Ideally, I’d even like the option to make the text a bit smaller as the screen gets smaller (obviously this wouldn’t be viable on phones, but it’d be smoother looking for tablets and computer windows. I tried making both text size and top margin a percentage, but it didn’t work. Any advice?


Here is my public share link: https://preview.webflow.com/preview/abps-mark-2?preview=10ae3332f29e48cefc6ea78323c4425b

You can use VW measurements for the font size. It will make font depend on browser width

I don’t think I can type VW measurements into the margin box, and I don’t know enough CSS to do that. Do you have any example code I could try?

VW and VH measurements is kinda new in CSS but supported by Webflow.
These measurements calls “Viewport Width” and “Viewport Height” and equal percentage of browser width or height:
1vw = 1% of browser window width,
1vh = 1% of browser window height.

Here is a site where I used these measurements in margins/padding as well as in the font size

Preview in Webflow: https://preview.webflow.com/preview/earthbornbed?preview=c668d3ff6908d7e7512ff25a39edd33f

Cheers,
Anna

Oh wow, the vw and vh are hidden and only show up if you type them in a field. THanks!

1 Like

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