Highlighted

Master sticky header + footer, and page elements all pinned center, yet not

Community Beginner ,
Nov 15, 2017

Copy link to clipboard

Copied

I have a master page setup with:

-     a pinned to top and centered header

-     a centered footer

A page setup with:

-     various elements centered

All 3 different groups of elements should behave identically and remain center aligned with one another in the middle of the browser at all times, however they "center" on different Y-axis when previewed and the viewport is scaled down

WHY?

Also, when scaling the viewport down the page content stops as if there is a left margin. There is no left margin of any kind anywhere.

WHY?

Thanks for any help!

Katie

Centering elements vertically isn’t actually possible in Muse „out of the box“. To achieve that, youhave to use 3rd party widgets.

In horizontal direction, Muse does exactly, what you told it to do:

You have a fixed width page with breakpoints. Do the following:

Deselect all elements and choose the „Fill“ command in Muse’s upper control strip to colour your page background. Now you’ll see, what is your page and what represents the browser background. Additionally you will see that the horizontal centering stops, when you reach the breakpoint’s/page’s edges at 816 px. Some master page element stop centering at 960 px, because you don’t have a smaller breakpoint on your master.. This is absolutely normal behaviour for fixed width pages. To avoid this, create a smaller fixed width breakpoint at about 320 px.

Before going on, I’d suggest, that you have a very intense look at the Muse tutorials, which you find here: https://helpx.adobe.com/support/muse.html – especially at the „beginner’s guide.

Views

426

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

Master sticky header + footer, and page elements all pinned center, yet not

Community Beginner ,
Nov 15, 2017

Copy link to clipboard

Copied

I have a master page setup with:

-     a pinned to top and centered header

-     a centered footer

A page setup with:

-     various elements centered

All 3 different groups of elements should behave identically and remain center aligned with one another in the middle of the browser at all times, however they "center" on different Y-axis when previewed and the viewport is scaled down

WHY?

Also, when scaling the viewport down the page content stops as if there is a left margin. There is no left margin of any kind anywhere.

WHY?

Thanks for any help!

Katie

Centering elements vertically isn’t actually possible in Muse „out of the box“. To achieve that, youhave to use 3rd party widgets.

In horizontal direction, Muse does exactly, what you told it to do:

You have a fixed width page with breakpoints. Do the following:

Deselect all elements and choose the „Fill“ command in Muse’s upper control strip to colour your page background. Now you’ll see, what is your page and what represents the browser background. Additionally you will see that the horizontal centering stops, when you reach the breakpoint’s/page’s edges at 816 px. Some master page element stop centering at 960 px, because you don’t have a smaller breakpoint on your master.. This is absolutely normal behaviour for fixed width pages. To avoid this, create a smaller fixed width breakpoint at about 320 px.

Before going on, I’d suggest, that you have a very intense look at the Muse tutorials, which you find here: https://helpx.adobe.com/support/muse.html – especially at the „beginner’s guide.

Views

427

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
Nov 15, 2017 0
LEGEND ,
Nov 15, 2017

Copy link to clipboard

Copied

Please reduce your site to only one page and only a few „misbehaving“ elements and share this .muse file. Then we can have a look.

Please follow these instructions: https://forums.adobe.com/docs/DOC-8652

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...
Nov 15, 2017 0
Community Beginner ,
Nov 15, 2017

Copy link to clipboard

Copied

Hi there,

I'll prepare a file to share with you. In the meantime, below are some screenshots of the viewport at three sizes to show you what I mean.

And I need to correct myself:

"All 3 different groups of elements should behave identically and remain center aligned with one another in the middle of the browser at all times, however the pinned header "centers" on different Y-axis then the footer and page content when previewed and the viewport is scaled down"

Thank you!

Screenshot 2017-11-15 13.19.13.pngScreenshot 2017-11-15 13.19.27.pngScreenshot 2017-11-15 13.19.38.png

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...
Nov 15, 2017 0
Community Beginner ,
Nov 15, 2017

Copy link to clipboard

Copied

Here is a dropbox link to a test Muse file to show the issue I'm having:

Dropbox - fb-foruminvestigatefile.muse

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...
Nov 15, 2017 0
LEGEND ,
Nov 15, 2017

Copy link to clipboard

Copied

Centering elements vertically isn’t actually possible in Muse „out of the box“. To achieve that, youhave to use 3rd party widgets.

In horizontal direction, Muse does exactly, what you told it to do:

You have a fixed width page with breakpoints. Do the following:

Deselect all elements and choose the „Fill“ command in Muse’s upper control strip to colour your page background. Now you’ll see, what is your page and what represents the browser background. Additionally you will see that the horizontal centering stops, when you reach the breakpoint’s/page’s edges at 816 px. Some master page element stop centering at 960 px, because you don’t have a smaller breakpoint on your master.. This is absolutely normal behaviour for fixed width pages. To avoid this, create a smaller fixed width breakpoint at about 320 px.

Before going on, I’d suggest, that you have a very intense look at the Muse tutorials, which you find here: https://helpx.adobe.com/support/muse.html – especially at the „beginner’s guide.

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...
Nov 15, 2017 0
Community Beginner ,
Nov 16, 2017

Copy link to clipboard

Copied

The master page header does not stop, but continues to respond. This is the main issue…

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...
Nov 16, 2017 0
Community Beginner ,
Nov 16, 2017

Copy link to clipboard

Copied

As the footer and page content do align center with one another and stop at a point together, the master header elements continue on…

Your explanation does not explain this…

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...
Nov 16, 2017 0
LEGEND ,
Nov 16, 2017

Copy link to clipboard

Copied

These element are set to „Stretch to browser width". All as expected!

As I said: Watch the tutorials I linked.

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...
Nov 16, 2017 0
Community Beginner ,
Nov 16, 2017

Copy link to clipboard

Copied

As are the footer elements, yet they behave differently. The difference is that the header is pinned and the footer is not…so clearly the pinning makes a difference?

I have watched many tutorials, and thus I'm here asking for additional help.

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...
Nov 16, 2017 0
LEGEND ,
Nov 16, 2017

Copy link to clipboard

Copied

Don‘t understand, what you mean …

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...
Nov 16, 2017 0
Nov 16, 2017

Copy link to clipboard

Copied

Hey,

I have tried to do some experimenting with your file, Please check if this is what you looking for to achieve?

Here is the file - Adobe Creative Cloud.

Regards,

Ankush

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...
Nov 16, 2017 1
Community Beginner ,
Dec 06, 2017

Copy link to clipboard

Copied

Hi there. The file I downloaded doesn't solve the problem…elements are all sorts of unaligned. But thank you for trying to help! I THINK I've solved the problem! However, with Muse, just as I fix one thing, another thing goes wonky!

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...
Dec 06, 2017 0