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
Nothing should be outside the canvas at no breakpoint and not between breakpoints.
To watch out between breakpoints, use this:
We call it "the scrubber".
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.
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.
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...
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.
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
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:
and the anchor is better placed just at the left edge of the canvas and not that much off the canvas:
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...
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.
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.
So if you made e new version of your site, simply show it.
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.