Jump to content

Site shifts left and right on desktop and mobile

Recommended Posts

  • 7 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...
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? 

Link to comment

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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. 

Screen Shot 2021-12-09 at 8.53.57 AM.png

Screen Shot 2021-12-09 at 8.53.46 AM.png

Link to comment
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! 🙂

Link to comment
  • 4 weeks later...

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

@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.

1241275984_ScreenShot2022-01-06at11_17_25AM.thumb.png.c6eae14107acb0cae7433b795028b068.png

1725424632_ScreenShot2022-01-06at11_20_18AM.thumb.png.21c8af4cfcf89617456b916e6e38e60b.png

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 3 months later...
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 1 month later...

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!

Link to comment
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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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>

 

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 3 months later...

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? 

IMG_0118.PNG

Link to comment
  • 2 weeks later...
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. 

Link to comment
  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.