Button position fixed in responsive layout

Hello dear community,

I’m giving in and finally asking for help, after trying myself for way too long. I’ve got the following issue, which I seem not be able to fix:

The golden Button, which should indicate that there is more content once the user scrolls down, should be placed exactly between both sections (between white & black bg). Unfortunately, on different devices with different sizes it doesn’t stay fixed. Can anyone please help me?

Read Only Link here!

Thanks in advance!

Hey Jannik.

First you have to move the button in to the same section as the content of the white section.

From this
image

To this:
image

Then you have to change the “position” property of the section containing the button.
image

Change the position from static to relative

After doing this the div element you want to position using the “Position:Absolute”-Property will be positioned realtive to the section element instead of the body.
image

Then you can position the element using the properties below for all the different devices.
image

I would give the button these values.
image

Then It looks like this for me.

Hope that helps.

Don’t hesitate to message me if you have any furhter issues.

Felix

1 Like

Hi Felix, you’re an absolute legend! Thank you so much, can’t believe how much headaches this issue gave me.

It’s funny, once I started reading your answer it instantly made sense to me and I was wondering, how I couldn’t figure this out myself. Thanks again!!

1 Like

Awesome, that’s so great to hear. Glad I could help!

:smiley: