How to align elements correctly

Design help General
1

Hello guys!

In my website, I have a slider the goes full width and full height at the very top of the page. It shows that way for all devices. after that there is a section where I want to show a special parallax thingy with clouds. It goes inside a div that has absolute position and here is where my issue comes. Because I need to know how to position this absolute div in some way that it starts to show after the slider.

The way I did it is to simply add a margin-top (which is obviously different for each device) so that it shows where I want it to be. However, I was wondering if there is a way to not have to use trial and error to find the right measures for each device. Is there a way to define some way for the parallax clouds to start showing after the slider? Or the only way to position them is manually like I did?? With trial and error until I found the right margins needed for each device?

Here is the website: hauzz.webflow.io
Here is the shared link: https://preview.webflow.com/preview/hauzz?preview=5fb6e08c2047e0d411cbad65cfdaaec1

I need to know if there is a better way of doing this because this is something I have needed for other websites as well and it would save me a lot of time and also I would know it would show in a better way.

Thanks!!

2

remove the 600 pixel top margin then change the top position from zero to 100%

1 Like
3

thank you so much!! i will try that.

4

Hey aerismel I’d love to know how you achieved that parallax with the clouds? Can you share any tips on it please?

1 Like
5

Hi Godweeno! Of course!! The clouds are 3 layers that I created. Each layer has a different distribution of the clouds. Here is an example of one of the layers. They all are png images.

1400×900 26.8 KB

And then I just used the 3 layers as background images. The youtube video explains how to do that. It was really really simple to follow. If there is anything else I can help you with, please tell me. I’ll try to help.

Cheers!

1 Like
6

Thanks so much, that’s a great bit of advice, really appreciate it! :ok_hand:

2 Likes
7

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