Streaming live at 10am (PST)

Help positioning layered elements when resizing

#1

Hey Community.

I started with Webflow a few months ago and I’m hooked!. I’m building my second website with Webflow and I’m struggling with what I thought I’ll be a pretty easy step. I have a hero section with a PNG (that shows a workspace with some screens, on top of two elements that there are suppose to have a video Background (yellow Divs for know) inside

The general Idea is to have video “place” inside the screens.

I can position everything all right but I’m fighting to make it stay in place when the viewport is resized.

Just hoping to get some help from the community

Thax!


Here is my public share link: Creative Nerd Main1
(how to access public share link)

1 Like
#2

Hello @emotran

I’m thinking about creating the layout using the monitors like separate elements. Right now they are part of an image and it’s hard to get them right. The big one is working well with some tweaking > https://www.useloom.com/share/1a7c61e8550f48efbe3d9c08e9682ea4 But on smaller screens there will be a problem.

I can try making the same layout, but every monitor will be a separate element and the scaling will affect them as well. Hope you’re getting what I’m saying :sweat_smile:

Piter :webflow_heart:

1 Like
#3

Hey @PiterDimitrov

Thx for the replay, I heard you, it might be time to re-think that hero section altogether. I’m curious about what tweaking did you did to make the big one work in your example.

Thx for the help!

1 Like
#4

I will show you. Give couple of minutes :webflow_heart:

#5

Thx @PiterDimitrov, that’s really kind of you, If you don’t have the time to show me, just a few concept on how to star will help, I can try to figure it out from there

Best!

1 Like
#6

Hello again :wave:

I was sleeping. I will record my screen right now and paste the link here.

@emotran Here’s a link to the screen record where you can see how I’m positioning the big screen > https://www.useloom.com/share/e68cc355939c4efa8b2908ca295d467a

Piter :webflow_heart:

1 Like
#7

Dang @PiterDimitrov Thanks so much. I never thought about that 50% aliment with the transformation offset. Brilliant! Learning a bit more every day

You are the best, thanks again for your help!

Got it! I manage to make the two screens behave using the same trick. I appreciate it
https://www.useloom.com/share/a50ddf94d9984494979eaff7a8f77aea

1 Like