Need help positioning element please

Design help General
1

Hey, I’m still a noob at Webflow

How do I centre my mobile mockup and make it stay centred when I resize the browser?

Screenshot attached of how it should look.

Thanks in advance :slight_smile:

Here is my site Read-Only:

https://preview.webflow.com/preview/travelbuddy-b992c5?utm_medium=preview_link&utm_source=dashboard&utm_content=travelbuddy-b992c5&preview=1e1217c9c3f6194596a462c80d50ab6e&mode=preview![22|660x500](upload://zkhY0FddwYLLOJ7Xy5V9fgLN0cb.jpeg)

2

Remove position:fixed from your Splash Gif Temporary.

3

Hi I’ve tried lots of things whilst it was set to absolute/relative/static positioning before trying the fixed position, still couldn’t get it to do what I wanted.

4

Is this not what you wanted?

5

Ah ok. I guess what I’m asking then is how to get the mobile mockup into the position shown in the screenshot and have it stay there when resizing the browser window.

6

It is currently centered since you have removed position:fixed. Is there anything else you wanted to do with your layout?

7

Yes - how to get the mobile mockup into the position shown in the screenshot.

It’s now centred but needs to be lower like in the screenshot and I need it to resize with the hero bg/illustration (and stay in that position) when the browser window is resized.

I’ve tried different position settings on parent elements and moving it using a transform but when I resize the browser it doesn’t stay where I want it to.

8

Hm… this looks pretty much the same as on the screenshot.

Care to make a video describing your issue? Otherwise I sadly cannot understand the problem with layout.

9

It’s close but I need it to be exactly on the diagonal line and to stay on it when the browser is resized

10

OK, here are some directions for you to follow and go from there:

  • delete your background image
  • add this image as a background to your hero section, set it to cover and position to center
  • set your mobile container to static, set its height to 100%, remove transform form it, set it’s flex-align to center
  • give your splash gif temporary image position:relative, top to about 20%.

Now you are more or less where you want to be. Tweak from there as necessary.

1 Like
11

Thanks for your help I really appreciate it :slight_smile: Will give this a try later today

12

Hey @dram

Can you help me with this? I have set scroll into view reveal animations for the text and headers, for some reason, the ones towards the bottom of the page are not showing up on preview and I can’t work out why.

I’ve played around wit Z index but no change.

https://preview.webflow.com/preview/travelbuddy-b992c5?utm_medium=preview_link&utm_source=dashboard&utm_content=travelbuddy-b992c5&preview=1e1217c9c3f6194596a462c80d50ab6e&mode=preview

13

Play with your offset. More than 50% is too much.