Highlighted

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

Community Beginner ,
Sep 28, 2018

Copy link to clipboard

Copied

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?

Adobe Community Professional
Correct answer by fotoroeder | Adobe Community Professional

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

Views

213

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Community Beginner ,
Sep 28, 2018

Copy link to clipboard

Copied

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?

Adobe Community Professional
Correct answer by fotoroeder | Adobe Community Professional

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

Views

214

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 28, 2018 0
Adobe Community Professional ,
Oct 02, 2018

Copy link to clipboard

Copied

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

Kind Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 02, 2018 0
Community Beginner ,
Oct 02, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 02, 2018 0
Adobe Community Professional ,
Oct 02, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 02, 2018 0
Lkj LATEST
Community Beginner ,
Oct 03, 2018

Copy link to clipboard

Copied

Thank you! I knew it was something obviously blatant

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 03, 2018 0