How can I get an element centered on a fixed width site?

[Lkj]

I am baffled with this seemingly simple task. I created a test file which can be downloaded here if anyone wants to help me tackle this.

So basically I got one static rectangle and a button underneath it. They both stay in place while the page is scrolling. When the button is clicked it triggers scrolling (and a fade out scroll effect of the button) and a rectangle pops up from underneath it. The problem is, I want that second rectangle to be centered in the page... I cannot seem to achieve this no matter what combinations of pinning options I use.

Is there something I'm failing to see here? How do I achieve for the second rectangle to always stay in the centre of the browser?

[fotoroeder]

You simply won`t need any pinning in fixed width layout/breakpoints. With pinning it gets worse in this case.

Kind Regards,

Uwe

[Lkj]

Thanks but if I don't pin the elements, how do I get them to stay in the centre of the browser?

[fotoroeder · Accepted solution]

You should add some breakpoints of course.

You may download your file here:

https://adobe.ly/2Os8PnC

I added some breakpoints, I did not change the size of the elements, though.

If you don`t want to add breakpoints you must at least the minimum breakpoint to a smaller value than in your original file.

Kind Regards,

Uwe

[Lkj]

Thank you! I knew it was something obviously blatant