Website on mobile is not fitting correctly.

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. 

On 10/30/2022 at 6:18 PM, 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: clip !important;
}

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  ⬇️

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

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:

@paul2009 thank you so much!

that was it!