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.
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.
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.
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.
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.
Let´s see, if this is the support you could live with or if somebody out there has a better solution.
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.
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.
Here the respective example file: https://www.dropbox.com/s/qbh8fu0wp72y8oy/VISION%20EXCESS%20Mod.muse?dl=0
Thanks for the lesson. Always a pleasure . I didn´t have in mind that uniform spacing and uniform size reacts/calculates different.