Site shifts left and right on desktop and mobile

Hi all,

This has been driving me crazy for some time and wanted to see if I could get some advice on how to fix. My site is looking pretty solid, but on all pages it can be shifted left/right. I can't seem to find any reason why this would be happening. Any thoughts?

Here is my site for reference: https://handandarrow.com/

@formedfromlight You can add this code to Home > Design > Custom CSS to solve

html, body {
    overflow-x: hidden;
}

This works, but seems to add a white bar over my header? Any ideas? 

Thanks! 

21 hours ago, Nickrygsman said:

This works, but seems to add a white bar over my header? Any ideas? 

 

Thanks! 

Can you take a screenshot white bar?

and which device/browser do you use?

On 12/23/2019 at 3:46 PM, tuanphan said:

@formedfromlight You can add this code to Home > Design > Custom CSS to solve

html, body {
    overflow-x: hidden;
}

 

When I add this code it displays a tiny scroll bar over my navigation “folder.” If I add 

html, body {
          overflow:  hidden;
}
then it screws up the editor so that I cannot edit the site via the editor. 

any suggestions? 

@smashedink

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

13 hours ago, creedon said:

@smashedink

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

https://www.resilientintimacy.com/ 

In the mobile view

You can see that adding the code fixes movement issue but the "services" drop down in the menu doesn't properly function now. 

Additionally, the code as to be removed to make edits to any part of the site in the classic editor and then added back to fix mobile movement issue after changes are applied. Easily done, but not ideal. 

@sINK

The following ruleset in Custom CSS is causing the issue.

@media only screen and (max-width: 640px) {
    #block-yui_3_17_2_1_1637592716578_2942.sqs-block-image {
        width:150%;
        margin: auto
    }
}

51 minutes ago, creedon said:

@sINK

The following ruleset in Custom CSS is causing the issue.

@media only screen and (max-width: 640px) {
    #block-yui_3_17_2_1_1637592716578_2942.sqs-block-image {
        width:150%;
        margin: auto
    }
}

 

Totally missed this! Thank you SO MUCH! 🙂

@creedon this is happening to me and it is driving me crazy! I dont know how it is happening! 

@lidyaaC

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

@creedon really sorry I thought I had added the link! 
 

https://lydia-cottrell.com 

@lidyaaC

Here is the issue. You are rotating an image with CSS. When the page is scrolled the box that contains the image is rotating causing the page to get wider. Hence the elements on the page expand to fill the available space.

With Chrome DevTools we can highlight the element to show it increasing the width.

As a workaround add the following to Design > Custom CSS.

[data-section-id="614504a1eaa6bd57190b1554"] {

  overflow-x : clip;
  
  }

This is specific to the poster's need.

Let us know how it goes.

@creedon this worked! Thank you so much for your help! 

This is happening to my site and it's so annoying! Could anyone help?

https://www.turingfest.com/#/

7 hours ago, lauraturingfest said:

Could anyone help?

The previous speakers section is causing the issue. As to why I wasn't able to figure out in the short time I looked at it but something seems off about it.

As a workaround add the following to Design > Custom CSS.

[data-section-id="6256ee5bc596c926c274400f"] {

  overflow-x : hidden;
  
  }

Let us know how it goes.

Hi everyone, we also have the issue that after having added a custom hamburger menu on a webpage, the webpage can be scrolled horizontally when displayed on mobile Safari browser. Following above advice I tried below code in Design > custom CSS already but it did not solve the issue yet, unfortunately.

html, body {
    overflow-x: hidden;
}

The website is enactus.de/awa/home.

Apart from the moving mobile page the hamburger menu works perfectly fine (links are not activated yet). The issue is most likely the white circle in the top right corner which probably needs to be cut?

Thanks a lot!

On 5/30/2022 at 5:19 AM, E-Ger said:

The issue is most likely the white circle in the top right corner which probably needs to be cut?

The issue is the circle. Try using a quarter circle. I suggest the following CSS.

label .menu {

  --color : white;
  --size : 100px;
  
  background : var( --color );
  border-bottom-left-radius : 100%;
  
  -webkit-box-shadow : 0 0 0 0 var( --color ), 0 0 0 0 var( --color );
  box-shadow : 0 0 0 0 var( --color ), 0 0 0 0 var( --color );
  
  cursor : pointer;
  height : var( --size );
  position : absolute;
  right : 0;
  top : 0;

  -webkit-transition : 0.5s ease-in-out;
  -o-transition : 0.5s ease-in-out;
  transition : 0.5s ease-in-out;

  width : var( --size );
  z-index : 9;
  
  }

label .hamburger {
  
  background-color : #3c3c3c;
  height : 2px;
  left : 50%;
  position : absolute;
  top : 50%;

  -webkit-transform : translateY( -10px );
  -ms-transform : translateY( -10px );
  transform : translateY( -10px );
  
  -webkit-transition : 0.5s ease-in-out;
  -o-transition : 0.5s ease-in-out;
  transition : 0.5s ease-in-out;

  width : 30px;
  z-index : 9;
  
  }

Let us know how it goes.

Thanks Creedon, much appreciated. Good news is that your CSS code resolves the issue I described and the website does not move anymore.

Bad news is that the hamburger is not clickable anymore. This is my latest CSS including your changes and excluding the previous code. Any idea how to fix this?

Thanks!

<style>
*, *:before, *:after 
{ box-sizing: border-box; }

/*html { font-size: 14px; }*/

body {
  /*color: #3c3c3c;
  font-size: 1em;
  line-height: 1.6;*/
  background: #fa6900;
  overflow-x: hidden;
}

label .menu {

  --color : white;
  --size : 100px;
  
  background : var( --color );
  border-bottom-left-radius : 100%;
  
  -webkit-box-shadow : 0 0 0 0 var( --color ), 0 0 0 0 var( --color );
  box-shadow : 0 0 0 0 var( --color ), 0 0 0 0 var( --color );
  
  cursor : pointer;
  height : var( --size );
  position : absolute;
  right : 0;
  top : 0;

  -webkit-transition : 0.5s ease-in-out;
  -o-transition : 0.5s ease-in-out;
  transition : 0.5s ease-in-out;

  width : var( --size );
  z-index : 1;
  
  }

label .hamburger {
  
  background-color : #3c3c3c;
  height : 2px;
  left : 50%;
  position : absolute;
  top : 50%;

  -webkit-transform : translateY( -10px );
  -ms-transform : translateY( -10px );
  transform : translateY( -10px );
  
  -webkit-transition : 0.5s ease-in-out;
  -o-transition : 0.5s ease-in-out;
  transition : 0.5s ease-in-out;

  width : 30px;
  z-index : 1;
  
  }  
  
/*label .menu {
  position: absolute;
  right: -100px;
  top: -100px;
  z-index: 100;
  margin-top: 0.9em;
  padding: 1em;
  width: 200px;
  height: 200px;
  background: #FFF;
  border-radius: 50% 50% 50% 50%;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF;
  cursor: pointer;
}

label .hamburger {
  position: absolute;
  top: 135px;
  left: 50px;
  width: 30px;
  height: 2px;
  background: #3c3c3c;
  display: block;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}*/

label .hamburger:after, label .hamburger:before {
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: #3c3c3c;
}

label .hamburger:before { top: -10px; }

label .hamburger:after { bottom: -10px; }

label input { display: none; }

label input:checked + .menu {
  box-shadow: 0 0 0 100vw #FFF, 0 0 0 100vh #FFF;
  border-radius: 0;
  
}

label input:checked + .menu .hamburger {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  
}

label input:checked + .menu .hamburger:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  bottom: 0;
  
}

label input:checked + .menu .hamburger:before {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 0;
  
}

label input:checked + .menu + ul { opacity: 1; }

label ul {
  z-index: 200;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  -webkit-transition: .25s 0s ease-in-out;
  transition: .25s 0s ease-in-out;
}

label a {
  margin-bottom: 1em;
  /*margin-top: 1em;*/
  display: block;
  color: #3c3c3c;
  text-decoration: none;
  
}

/*h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 80%;
  text-align: center;
}*/
  </style>

1 hour ago, E-Ger said:

Bad news is that the hamburger is not clickable anymore. This is my latest CSS including your changes and excluding the previous code. Any idea how to fix this?

It is a z-index issue. I updated my code. The fix was to set index to 9.

Let us know how it goes.

2 hours ago, creedon said:

It is a z-index issue. I updated my code. The fix was to set index to 9.

Let us know how it goes.

Excellent, looks great! Thanks a lot for your prompt support!

Hi I need help with the same issue.

My site www.rewindcinema.net moves left and right on iphone using safari. It can be stopped by pinching out and zooming out but this introduces a white bar down the right hand side of the site. Also the cart icon is cut off by half for some reason too. Can anyone help? 

4 hours ago, gdmartino said:

My site www.rewindcinema.net moves left and right on iphone using safari.

I don't have a solution but the usual cause of this type of issue is some element overflowing a parent element causing the line on the right.

On 9/17/2022 at 1:12 PM, creedon said:

I don't have a solution but the usual cause of this type of issue is some element overflowing a parent element causing the line on the right.

Thanks for the reply Creedon. I mean, that may be true but there's no way of knowing so it doesn't help much. When I edit on the browser and view in mobile mode it doesnt "move" and everything is set up as normal as in: images placed where they are by switching to mobile view. I can't edit anything. It's a product list. So frustrating. 

Hey, I came here because my mobile site is doing the same thing. @creedon you've been SUPER helpful to others, wondering if you might have a moment to give mine a look?

Site url: https://seabass-gecko-kam7.squarespace.com/ 
password: colby