Positioning problems with chrome

[the_Zar]

Hi.

On mobile breakpoints of my website I have added an hamburger menu using the lightbox widget. I am experiencing troubles with chrome on android. When I lunch the preview mode  online (or the entire site) the trigger box is placed beyond the page width borders. This affects also the navy menu that does not remain pinned to the top of the browser when scrolling. On iOS all works fine.

How could I solve it?

Thx

[Günter Heißenbüttel]

No link to have a look at the site? You may publish a free temporary site on businesscatalyst using the „Publish“ menu top right of Muse‘s application window.

[the_Zar]

Home | Consultec Energia | Consultec Energia

[Günter Heißenbüttel]

I think, on iPhone/iPad all is working correctly only at first glance. If you swipe on the screen, you see the background shifting.

There are elements bleeding outside the breakpoint width – for example the first page wide spanning image.

Look at this very(!) small screencast:

To fix this, please read my answer #8 here: https://forums.adobe.com/thread/2377071

[the_Zar]

Sorry Gunter but i don't get your point.

The background is shifitng just because you have passed from a Bpoint to another and i have set different sizes for the

rectangle.

What i see on chrome (mobile device) when i refresh the home page (for example) is this screen:

As you can see the ham menu trigger is outside the border page. I have to swipe to the right to find it. If i zoom out here is the screen:

If i scroll down now the nav menù stays on top as it should be.

On the other hand scrolling down without zooming out first, the nav menù doesn't stay pinned on the top of the browser.

[Günter Heißenbüttel]

If you read my link above and follow the instructions, you‘ll see:

No element st no time is allowed to be outside the breakpoint width. And you undoubtedly have such element on your page. Of course you issue may be caused by these bleeding elements.

Differnet mobile browsers react differently on such issues. So please fix this and look, what happens.

Additionally: Please post screenshot directly into you thread. Your Google hosted screenshots require a sign up/sign in.

[the_Zar]

Sorry Gunter but i'm quite sure that i don't have any elements put ouside the page borders.

The background for istance is just the fill of a full browser width rectangle. Really i don't undestrand what i should look for

in my project.

[Günter Heißenbüttel]

I am sure, you have.

Please share your site with us using Dropbox, CC Files, or a similar file sharing service. Very important: Only one page, only a few elements to demonstrate your issue. If you don‘t do this, we have to do this while checking the file, and additionally have to bare long download times.

[the_Zar]

Adobe Creative Cloud

Thank you

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

Ok, I had a look at your file. It is very hard to check, because you are using web font, which I don’t have and inconsequence the layout gets scrambled all over – even if I temporarily replace the web fonts by standard fonts with fallback.

You are completely right: The image, I supposed to bleed outside the breakpoint, was not a placed, but a fill image and the number bottom right of this image simply gets clipped, when the browser window is resized, because it is set to „Scale to Fill“.  So, no misplaced elements!

I suppose, you issue is related to a bug, which is already fixed in latest prerelease version. When I check you file in this version, I can’t see the shifting errors any more.

In your file, I can see some small issues, which however aren’t related to you main problem:

• some small layout glitches, which can easily be repaired by repositioning some elements, (for example logos falling out of order when scrubbing in breakpoint 876 px,
• form fields, which are running out of control (seems also to be fixed in latest prerelease), and
• the „vertical shift“ widget, which isn’t necessary any more, to find at -137/100px in breakpoint 1419 px.

Please do the following to check, if I am right:

Sign in to „Adobe Prerelease“: https://www.adobeprerelease.com​ and the Adobe Muse Prerelease Program and load the actual prerelease version of Muse. This version installs alongside your existing Muse version and won’t interfere with it in any way. Keep a backup of your actual file and check your site. I think, the issues, you are encountering, aren’t present any more.

[the_Zar]

Thank you so much, now all it's allright!

Do you know when will this version be released ?

[Günter Heißenbüttel]

I hope, soon!

Serious: Like most other software companies, Adobe and the Muse team never announce a release date.

And again: Be aware, that a .muse file, once saved in prerelease version, wont open on former Muse versions. So: Keep a backup!