Highlighted

Horizontal shifting

New Here ,
Mar 21, 2018

Copy link to clipboard

Copied

Hi guys,
My site is shifting horizontally which I don't want.
In the largest breakpoint only, I can scroll right where there is unwanted 'empty' space. Also, when clicking the jump links, the page moves horizontally as well.

I have four breakpoints set up for this site, and only the largest one shifts.

Here is the file for reference 
Dropbox - Schauer Site v4.muse

Please help!
Thanks

Views

239

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

Horizontal shifting

New Here ,
Mar 21, 2018

Copy link to clipboard

Copied

Hi guys,
My site is shifting horizontally which I don't want.
In the largest breakpoint only, I can scroll right where there is unwanted 'empty' space. Also, when clicking the jump links, the page moves horizontally as well.

I have four breakpoints set up for this site, and only the largest one shifts.

Here is the file for reference 
Dropbox - Schauer Site v4.muse

Please help!
Thanks

Views

240

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
Mar 21, 2018 0
Adobe Community Professional ,
Mar 21, 2018

Copy link to clipboard

Copied

Nothing should be outside the canvas at no breakpoint and not between breakpoints.

Bildschirmfoto 2018-03-22 um 07.31.10.png

Bildschirmfoto 2018-03-22 um 07.31.32.png

To watch out between breakpoints, use this:

Bildschirmfoto 2018-03-06 um 08.11.14.png

We call it "the scrubber".

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...
Mar 21, 2018 0
Adobe Community Professional ,
Mar 21, 2018

Copy link to clipboard

Copied

Let ma add one more thing: it is recommended not to use system fonts, indicated by the tiny little T and landscape icon, but use web fonts.

Bildschirmfoto 2018-03-22 um 07.30.53.png

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...
Mar 21, 2018 1
New Here ,
Mar 22, 2018

Copy link to clipboard

Copied

Hi Uwe,
I have removed all items that exceed the breakpoint in the largest version, and the ability to move the page horizontally still exists. There must be something else causing this issue. It is not on the master page because when I preview that alone - it is fine.
Also, the smaller breakpoints have text over the canvas edge, and they do not have any horizontal movement.

I know the situation with the fonts... I'm in the process of changing those - but thank you for pointing it out.

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...
Mar 22, 2018 0
New Here ,
Mar 22, 2018

Copy link to clipboard

Copied

After doing some trial and error I'm figuring out the issue, but can't work out how to fix it.

It's two things:
The 'Read more' lightboxes are causing the shift and the right tooltip button. When I delete these there is no horizontal shifting.

Can't figure out how to stop them from shifting the page...

Screen Shot 2018-03-23 at 10.10.55 AM.pngScreen Shot 2018-03-23 at 10.11.31 AM.png

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...
Mar 22, 2018 0
Adobe Community Professional ,
Mar 22, 2018

Copy link to clipboard

Copied

Show us a new file with the elements you changed.

Try to reduce as much as possible and to only one page (as before) and share the .muse with us.

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...
Mar 22, 2018 0
New Here ,
Mar 25, 2018

Copy link to clipboard

Copied

So, after some more testing I'm finding that if I resize the browser window the horizontal shift increases.

If I preview the page at full width there is no shifting. However if I start to resize the browser width, the shift then is created and the amount it shifts increases as the width reduces.

I get the feeling something else is causing this.

Here's the new file 
https://www.dropbox.com/s/f7s8wonxsiqq1sf/Schauer%20Site%20v4.muse?dl=0

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...
Mar 25, 2018 0
Adobe Community Professional ,
Mar 25, 2018

Copy link to clipboard

Copied

I must admit, I do not understand the accordeon on your master. I guess you should better go with a composition, where the "hamburger" is there as a trigger and the menu  as lightbox "target".

The accordeon is outside the canvas and therefor is responsible for the shifting as browsers try to show everything and all elements.

AND on your page you still have this:

Bildschirmfoto 2018-03-26 um 00.24.50.png

and the anchor is better placed just at the left edge of the canvas and not that much off the canvas:

Bildschirmfoto 2018-03-26 um 00.25.50.png

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...
Mar 25, 2018 0
New Here ,
Mar 25, 2018

Copy link to clipboard

Copied

The accordian is 3rd party responsive widget. I can't see that as the thing that is causing the issue?

Similar with the the text off the canvas. I have deleted all those headers from the page and I still get the shifting...

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...
Mar 25, 2018 0
Adobe Community Professional ,
Mar 25, 2018

Copy link to clipboard

Copied

Then you should have a look where qooqee wants to have the accordeon placed. I simply can`t "find" it on the screen in preview.

I simply can`t open or even close the mobile menu.

Simply turn it off and see if you still have the shifting.

If yes, watch the other issue from my screenshots and the anchors. Browsers try to set this anchor on the left edge of the browser.

If this is solved simply turn the qooqee on again and watch, if everything works as intended.

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...
Mar 25, 2018 0
New Here ,
Mar 25, 2018

Copy link to clipboard

Copied

Hi Uwe,
I think I've figured out the problem... but can't work out the best approach to fixing it.

It looks like the problem is the breakpoints. At 1280px the site is fine. But when the site goes to 1281, then the shift is now in effect. 1280 is where a breakpoint is and it's set to fluid width. I also have one at 1400 with the same setting which is the highest breakpoint I have.

The shifting is only evident between these two points. However, once the browser expands to 1655px the shift is gone.

This is really confusing! haha.

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...
Mar 25, 2018 0
Adobe Community Professional ,
Mar 26, 2018

Copy link to clipboard

Copied

So if you made e new version of your site, simply show it.

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...
Mar 26, 2018 0
New Here ,
Mar 26, 2018

Copy link to clipboard

Copied

Hi Uwe,
Here's the live version for you to see.

I have a 27" monitor and at this size it's perfect - not shift. But when the browser is resized the area on the right side of the site increases until the site snaps to the next breakpoint.

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...
Mar 26, 2018 0