Smartphone layout - unwanted right margin space appears

[froufroufrou]

Hi there,

My website is almost done, but I've come across a bug that I can't seem to fix myself. When I view the website on smartphone an empty space in the right margin appears when you swipe to the right of the page (it also happens easily when swiping down the page, which is the biggest problem). I've tried to check for hidden elements that could be causing the problem, but I can't find any likely candidates. I've tested it on a iPhone 6 Plus in both Safari and Firefox.

You can see the issue for yourself on this link. The muse-file can be downloaded here (35.8MB). I hope some kind spirit can help me out.

[Günter Heißenbüttel]

The reason is:

On your layout page, you have a breakpoint at 670 px, on your master page at 650 px. Therefore some master page elements don’t „fit correctly. If you „synchronise“ the breakpoints all should work well.

Be aware: You configured your horizontal menu as „Uniform Spacing“ and not as „Uniform Size“. "Uniform Spacing“ doesn’t allow „Resize: Responsive Width“, for some obvious reasons.

[froufroufrou]

Thank you for your reply. I fixed the things you mentioned, and made a "manual" menu as well. I still have the problem with the right margin space, though... here's the new file.

[fotoroeder]

I started with deleting the breakpoint on your master at 450, there´s nothing in your design at 450 which needs a breakpoint.

It makes your site heavier, that´s it.

Watching it in responsive mode in Safari it looks OK, so far.

I also would delete the breakpoint on your "FORSIDE" as well.

Does this help?

Best Regards,

Uwe

[froufroufrou]

The bug could only be replicated on an actual smartphone (because of the swipe function I believe). Thank you for the tips on breakpoints.

[Günter Heißenbüttel · Accepted solution]

The reason is: With the new Muse version pinning behaviour was changed and corrected in comparison to previous Muse versions. Just look at this modified version of your site: http://stilling-test.businesscatalyst.com/index.html:

The difference:

I opened your hamburger menu and unpinned every(!) single element of your composition menu (trigger, target, complete composition). Now it should work.

If you want to pin the composition to the top of the browser window – just do it, but only pin the composition, not its elements.

[froufroufrou]

Thank you for taking the time to help yet again!

Your test site indeed doesn't have the bug anymore and I did as you said, but now the unpinned hamburger menu (the part that is opened) gets misplaced when resizing the window. (This also happens on your test site)

Edit: I also tried to make a whole new hamburger menu to see if that would fix it, but it didn't.

[Günter Heißenbüttel]

This is quite clear, and if you want the composition target and the menu within to be fixed width (as it is now) you have to control this by using breakpoints an modify the menu elements accordingly..

My suggestion: Define the target and the menu within as „responsive width“ and redesign it a little bit (= make it wider, so that the menu entries don’t break into two lines, when the browser window gets smaller.

If needed: pin the whole menu (not its single elements) to the left, but I think, it is not necessary.

I modified my sample site accordingly. Please have a look again: http://stilling-test.businesscatalyst.com/index.html

You may download the .muse file directly from this site.

[froufroufrou]

Thank you, it worked. It seems that I still have much to learn about Muse, even though I've been using it a lot.