Streaming live at 10am (PST)

Looking to have dynamic margin


#1

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:

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


#2

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


#3

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?


#4

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
http://earthbornbed.webflow.io
Preview in Webflow: https://preview.webflow.com/preview/earthbornbed?preview=c668d3ff6908d7e7512ff25a39edd33f

Cheers,
Anna


#5

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


#6

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