Jump to content

Website on mobile is not fitting correctly.

Recommended Posts

Hi, I have a problem with the site for mobile. It looks like some element is sticking out, but I have checked several times and can't find the cause.

The thing is that the page can be moved to the right and there you can see the end of the page - the background margin on one right side, as if it doesn't fit the format. I have to deal with this very quickly, because the page should be ready by now. I have absolutely no idea how to deal with this. 

HELP!!!!

Below I attach pictures of the described problem. 

IMG_6506.PNG

IMG_6505.PNG

Edited by forestzero
Link to comment
18 hours ago, forestzero said:

I have a problem with the site for mobile. It looks like some element is sticking out.

The...page can be moved to the right and there you can see the end of the page - the background margin on one right side, as if it doesn't fit the format.

This is happening because one or more of the elements are "overflowing" outside the intended width of the site.

This usually happens when you add custom code that isn't 100% correct. It is best to identify what is causing the issue and then address it because it may have other unintended (more serious) consequences that you have yet to discover.

That said, as a quick workaround you should be able to prevent the overflow issue by adding this to Design > Custom CSS:

body {
  overflow-x: hidden;
}

This will allow you to confirm that the issue is indeed an overflow issue but as I mentioned above, this is temporary and inadequate fix. The solution is to go through your custom code and remove section by section until you identify the offending code.

  If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️

Edited by paul2009
edited for clarity

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Thank you very much @paul2009, I tried it and it worked!

But now there's other issue - page is blocking while scrolling, there are some problems with scrolling up and down fluidly.

It seems like the page has it's end where it's just half of it.

You can see it your self on mobile, I'll leave those changes for now

Edited by forestzero
Link to comment
18 minutes ago, forestzero said:

I need to remove this margin on right side of website on mobile, but after adding this code you cannot scroll up or down smoothly.

As I mentioned before, the CSS to remove the overflow is a temporary workaround and will bring its own problems. It is not a solution.

The real solution is remove the sticking plaster above and then go through all the custom code you have added (usually Custom CSS) and identify the section of code that is causing the overflow. You can do this by removing everything and then add it a section at a time until the problem appears. Once you know the section with the issue, you can deal with it.

I'm not in a position to state which code is causing the overflow but if I had to guess, I'd suggest that the CSS referring to the social account links in the footer is probably a cause as this is overflowing:

image.thumb.png.2e08a0951195d440576f07e71ccb0a9a.png

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

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.