Highlighted

Problems in Muse with items scrolling when they need to be fixed

Explorer ,
Oct 30, 2017

Copy link to clipboard

Copied

Hello everyone,

I am new to Muse, and really struggling with it. I am trying to construct my first responsive site and have encountered one problem after another. Days have gone by and I am no nearer to solving them.

My temporary site (unfinished) is here: Home

I initially tried a fully fluid site but couldn't get it function right, so this a fixed site, with screen breaks at 1250 (full width), 960, 768, 480 and 320.

I have viewed the site on an iPhone 6, portrait and landscape, and iPad air and my 27" iMac.

On smaller sizes I can't keep the bold white in the dark grey footer without scrolling down, then it drops into place. I have reduced the depth of the page (as far as I know) to 850 using the drag guides at the bottom. I have set every page the same. This hasn't helped at all.

In addition to this, the menu bar varies in distance from the header picture/logo depending on the size

I have selected a darker browser colour for definition on a desktop device, jet it remains the same colour as the page when viewed on a browser.

I also can't find the pixel counter on Safari that I have seen in the orange scooter tutorial - or is this just a Chrome feature?

I haven't even started to populate the pages yet, if anyone can tell me why things aren't working properly I would be really grateful.

Many thanks,

Steve.

fotoroeder  schrieb

I guess, the menu following the header is simply not possible, if the header is responsive in width and height. I tried to group with no success.

Your guess is wrong!

It can’t work, the way it is actually done, because the menu is told by pinning not to change its position on the page – and it does, what it is supposed to do.

2 solutions:

  1. Don’t set the menu to „Equal Distance“, but to „Equal Size“, so you can make it responsive width. (The latter won’t work with „Equal distance“. Why? See my answer #3 in this thread: https://forums.adobe.com/thread/2370315​). Now, make sure, that header image and menu don’t overlap, remove all pinning, and group the image and the menu. The menu will now follow the header image, when the browser window is resized.) If you want both elements to stay visible at the top of the page and react synchoniously:
  2. Place both – header image and fixed width, equal spaced menu – into a „State“ button, and pin this button to the top.

Here the respective example file: https://www.dropbox.com/s/qbh8fu0wp72y8oy/VISION%20EXCESS%20Mod.muse?dl=0

Views

447

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

Problems in Muse with items scrolling when they need to be fixed

Explorer ,
Oct 30, 2017

Copy link to clipboard

Copied

Hello everyone,

I am new to Muse, and really struggling with it. I am trying to construct my first responsive site and have encountered one problem after another. Days have gone by and I am no nearer to solving them.

My temporary site (unfinished) is here: Home

I initially tried a fully fluid site but couldn't get it function right, so this a fixed site, with screen breaks at 1250 (full width), 960, 768, 480 and 320.

I have viewed the site on an iPhone 6, portrait and landscape, and iPad air and my 27" iMac.

On smaller sizes I can't keep the bold white in the dark grey footer without scrolling down, then it drops into place. I have reduced the depth of the page (as far as I know) to 850 using the drag guides at the bottom. I have set every page the same. This hasn't helped at all.

In addition to this, the menu bar varies in distance from the header picture/logo depending on the size

I have selected a darker browser colour for definition on a desktop device, jet it remains the same colour as the page when viewed on a browser.

I also can't find the pixel counter on Safari that I have seen in the orange scooter tutorial - or is this just a Chrome feature?

I haven't even started to populate the pages yet, if anyone can tell me why things aren't working properly I would be really grateful.

Many thanks,

Steve.

fotoroeder  schrieb

I guess, the menu following the header is simply not possible, if the header is responsive in width and height. I tried to group with no success.

Your guess is wrong!

It can’t work, the way it is actually done, because the menu is told by pinning not to change its position on the page – and it does, what it is supposed to do.

2 solutions:

  1. Don’t set the menu to „Equal Distance“, but to „Equal Size“, so you can make it responsive width. (The latter won’t work with „Equal distance“. Why? See my answer #3 in this thread: https://forums.adobe.com/thread/2370315​). Now, make sure, that header image and menu don’t overlap, remove all pinning, and group the image and the menu. The menu will now follow the header image, when the browser window is resized.) If you want both elements to stay visible at the top of the page and react synchoniously:
  2. Place both – header image and fixed width, equal spaced menu – into a „State“ button, and pin this button to the top.

Here the respective example file: https://www.dropbox.com/s/qbh8fu0wp72y8oy/VISION%20EXCESS%20Mod.muse?dl=0

Views

448

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
Oct 30, 2017 0
Oct 30, 2017

Copy link to clipboard

Copied

Hi Steve,

We need to see your site, maybe something very simple overlooked.

For sharing the file you can follow the steps explained here - https://forums.adobe.com/docs/DOC-8652 and share the link.

The answer to your second query is, it's not the hight which is matter, the matter is your header image is set as responsive width and height.

Now as the browser shrinks the image is reduced in both height and weight and this makes you feel that distance between header is menu getting larger.

Now to deal with this you may opt out choosing the header image as responsive, as you have so many breakpoints on your make use of it.

Thanks,

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...
Oct 30, 2017 0
Explorer ,
Oct 31, 2017

Copy link to clipboard

Copied

Thank you Ankush,

I have changed the heading setting as you suggested, but it doesn't help. Part of this might be my misunderstanding of how devices of differing sizes see the site. I'm looking at interim stages as well, thinking that if there is a size out there I don't know about, it will pick up a bad fit? Or will the device just snap to the nearest breakpoint to its screen size?

I have checked all other settings, but can't find anything I would consider amiss. The bold type at the base really does puzzle me. It doesn't misbehave on my iMac at any size, yet all too often it is floating halfway up the page on my iPhone and iPad landscape, and won't drop back in place without scrolling down. Scrolling options aren't even available on the text block, so It's not an incorrect setting.

As you say, you need to see my site - I thought providing a link was enough. How do I get my site to you in a manageable form?

Thanks again for your help.

Steve.

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 31, 2017 0
Oct 31, 2017

Copy link to clipboard

Copied

Thanks Steve,

For sharing the file you can follow the steps explained here - https://forums.adobe.com/docs/DOC-8652 and share the link.

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 31, 2017 0
Explorer ,
Oct 31, 2017

Copy link to clipboard

Copied

Hello ankush,

If I have done this correctly, it's waiting in dropbox for you: Dropbox - VISION EXCESS fixed.muse

I have thrown a lot of pages away, but you should still be able to see the problems.

Thanks,

Steve

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 31, 2017 0
Adobe Community Professional ,
Oct 31, 2017

Copy link to clipboard

Copied

Master: you don`t need the breakpoint at 320. There´s nothing to break from there. You even see at this breakpoint that it doesn`t fit.

To shed some light into this - nothing should be outside the canvas at any time. If you use the scrubber to scale your page between breakpoints - nothing should leave the canvas at any time. 320 should be just the minimum width.

You say you have changed the header? It is still set to be responsive in width and height. But it seems to work on master, though.

For your footer on master, I recommend to set the text to "not resize". and set this text in every breakpoint that it fits into the next smaller breakpoint. By this it is not that unpredictable how this text looks like.

I guess, the menu following the header is simply not possible, if the header is responsive in width and height. I tried to group with no success. I made a proposal with only the header, the menu and the footer. Feel free to change colors  and menu as you need.

Have a look at "my" different pinning. I pinned to container instead of pin to browser. I also changed text scaling behaviour in footer.

Adobe Creative Cloud

Let´s see, if this is the support you could live with or if somebody out there has a better solution.

Best 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 31, 2017 2
Explorer ,
Nov 01, 2017

Copy link to clipboard

Copied

Many thanks fotoreder, I'll take a look at this at the weekend, as the day job has just claimed all my time until then. Interesting what you say about the header - I only altered the master, but I have found that the master page doesn't always alter everything. That's the first thing I'll look at.

Thanks again,

Steve

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

Copy link to clipboard

Copied

fotoroeder  schrieb

I guess, the menu following the header is simply not possible, if the header is responsive in width and height. I tried to group with no success.

Your guess is wrong!

It can’t work, the way it is actually done, because the menu is told by pinning not to change its position on the page – and it does, what it is supposed to do.

2 solutions:

  1. Don’t set the menu to „Equal Distance“, but to „Equal Size“, so you can make it responsive width. (The latter won’t work with „Equal distance“. Why? See my answer #3 in this thread: https://forums.adobe.com/thread/2370315​). Now, make sure, that header image and menu don’t overlap, remove all pinning, and group the image and the menu. The menu will now follow the header image, when the browser window is resized.) If you want both elements to stay visible at the top of the page and react synchoniously:
  2. Place both – header image and fixed width, equal spaced menu – into a „State“ button, and pin this button to the top.

Here the respective example file: https://www.dropbox.com/s/qbh8fu0wp72y8oy/VISION%20EXCESS%20Mod.muse?dl=0

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 03, 2017 1
Adobe Community Professional ,
Nov 03, 2017

Copy link to clipboard

Copied

Thanks for the lesson. Always a pleasure . I didn´t have in mind that uniform spacing and uniform size reacts/calculates different.

Great, thanks,

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