Highlighted

Smartphone layout - unwanted right margin space appears

Community Beginner ,
Sep 18, 2017

Copy link to clipboard

Copied

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.

IMG_4835.PNGIMG_4836.PNG

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.

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.

Views

169

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

Smartphone layout - unwanted right margin space appears

Community Beginner ,
Sep 18, 2017

Copy link to clipboard

Copied

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.

IMG_4835.PNGIMG_4836.PNG

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.

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.

Views

170

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 18, 2017 0
LEGEND ,
Sep 18, 2017

Copy link to clipboard

Copied

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.

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...
Sep 18, 2017 0
Community Beginner ,
Sep 18, 2017

Copy link to clipboard

Copied

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.

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...
Sep 18, 2017 0
Adobe Community Professional ,
Sep 18, 2017

Copy link to clipboard

Copied

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.

Bildschirmfoto 2017-09-18 um 14.39.42.png

Does this help?

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...
Sep 18, 2017 1
Community Beginner ,
Sep 19, 2017

Copy link to clipboard

Copied

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

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...
Sep 19, 2017 0
LEGEND ,
Sep 18, 2017

Copy link to clipboard

Copied

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.

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...
Sep 18, 2017 0
Community Beginner ,
Sep 19, 2017

Copy link to clipboard

Copied

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.

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...
Sep 19, 2017 0
LEGEND ,
Sep 19, 2017

Copy link to clipboard

Copied

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.

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...
Sep 19, 2017 1
Community Beginner ,
Sep 19, 2017

Copy link to clipboard

Copied

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

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...
Sep 19, 2017 1