Highlighted

Positioning problems with chrome

New Here ,
Jan 09, 2018

Copy link to clipboard

Copied

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

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.

Views

254

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

Positioning problems with chrome

New Here ,
Jan 09, 2018

Copy link to clipboard

Copied

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

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.

Views

255

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
Jan 09, 2018 0
LEGEND ,
Jan 09, 2018

Copy link to clipboard

Copied

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.

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...
Jan 09, 2018 0
New Here ,
Jan 09, 2018

Copy link to clipboard

Copied

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...
Jan 09, 2018 0
LEGEND ,
Jan 09, 2018

Copy link to clipboard

Copied

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

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...
Jan 09, 2018 0
New Here ,
Jan 09, 2018

Copy link to clipboard

Copied

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:

AF1QipNSnzbU7TOgtUbOrHUtjm79CUj6X7a2NWm1uJTr

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:

AF1QipMiXzQfWJ1JvGmeqNoMlz5owMJ_T16K1VvdBHXd

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

AF1QipNku8AK17_SWse0MTvx1VQ7W0gGwfaAse1kuMaq

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

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...
Jan 09, 2018 0
LEGEND ,
Jan 09, 2018

Copy link to clipboard

Copied

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.

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...
Jan 09, 2018 0
New Here ,
Jan 09, 2018

Copy link to clipboard

Copied

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.

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...
Jan 09, 2018 0
LEGEND ,
Jan 09, 2018

Copy link to clipboard

Copied

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.

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...
Jan 09, 2018 0
New Here ,
Jan 09, 2018

Copy link to clipboard

Copied

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...
Jan 09, 2018 0
LEGEND ,
Jan 09, 2018

Copy link to clipboard

Copied

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.

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...
Jan 09, 2018 0
New Here ,
Jan 09, 2018

Copy link to clipboard

Copied

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

Do you know when will this version be released ?

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...
Jan 09, 2018 0
LEGEND ,
Jan 09, 2018

Copy link to clipboard

Copied

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!

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...
Jan 09, 2018 0