Responsive scaling and a border overlay

I’ve been working on my portfolio site for a couple months now, and finally finding webflow was one of the best steps in getting me there.
However, getting the responsive (viewport based scaling) to play nice with my custom overlay (which is static) has been super tricky, as I keep trying to find ways to have my pages simply scale with the viewport, without distorting the relationships between different elements on the page.

Ive come closest by setting everything to be static, scale based on the viewport width, and then using transforms to move items around on my page. This works for all but my home page, which seems to have bonus issues because of my rotated type.

If anyone could take a look and help me finesse this layout i would be most grateful.


Here is my site Read-Only: https://preview.webflow.com/preview/daniels-first-project-d910a4?utm_medium=preview_link&utm_source=dashboard&utm_content=daniels-first-project-d910a4&preview=e300d5232d7f226cf17d4007481f2263&mode=preview

Im not sure I made it totally clear but the big issue that im facing is because my overlay is made up of 3 images, placement fixed, and meant to not scale, they take up different amounts of screen real estate depending on the shape of the viewport, and often cut off parts of the main site divs.
also, ive looked at this topic which seems to cover a similar issue : Scaling website design but found the answer to be a bit tricky to understand and dont think it will work as a solution to my problem

Just my 3.25 cents worth.

Looks to me like you’re fighting with the elements. Most elements are already setup to do certain tasks. i.e. a three column element would help contain your three link blocks and you wouldn’t have to force them into place. image

If you utilize div blocks more it will make designing layouts so much easier. i.e. put a bunch of elements inside a div block then just style the div block and everything will follow. image

And for all projects (this applies to everyone making websites everywhere) realize the desktop can’t, and shouldn’t, be squeezed onto a mobile device. Webflow designed their elements to automatically adjust to the different widths and heights so it best to use those tools.

I’m tired of typing now, back to clicking.

1 Like