Need Help w/ Different Resolutions

Hi all! I’ve been building the setup for my portfolio site, and I’m running into one major issue: I have a lot of fixed elements in the UI, and they look great… in 1440x900. As soon as I grab the window and stretch/shrink it, the fixed elements start to overlap, or distance themselves. I’m sure I’m missing something obvious here (maybe with the units of measurement I’m using?).
Regardless, any help would be tremendous.

Thanks ahead,
corey

Public share link: https://preview.webflow.com/preview/yeee?utm_source=yeee&preview=8d5ad9e0fcdf1a5fe0158d8f5f79ff0e

Hey Corey,

Yes, you are right about the units. Using VW and VH is very similar to %. When you use one element- relative to something (width or height of the screen) and other element- with constant width (text or the pill div) they will overlap.

OK! So the solution is to re-create the same layout, with VW/VH instead of PX as my units of measurement for everything?

That could be a great solution.

1 Like

I’ll give it a shot, thanks for such a quick response!

1 Like

OK, I made the changes, but it still doesn’t stretch well. Not sure what to change now :confused:

Here’s the updated link: https://preview.webflow.com/preview/yeee?utm_source=yeee&preview=3e0475dc18aabbd090a0f2831e3c97d9

It doesn’t seem like you changed units for the elements that overlap.

The positioning on the everything is set to VH/VW as opposed to PX. The text is set to EM as opposed to PX. The only thing that didn’t change is the lines were already set to VH/VW, with 1 px for the thickness.

I tried exploring Webflow University for lessons about responsiveness, and couldn’t apply any of those either.

The EM units you gave to the texts does not change the width of the elements. Which means it is not what I intended.

I would suggest maybe put all elements that are in a row or column, in a container with flex property or wrap everything with grid.

1 Like