Horizontal Scroll lock

Ask the community
,
1

Hi Guys,

I have place elements out side of the grid lines on my site to increase its suitability for larger monitor users. However this is creates a horizontal scroll bar when viewing the site on smaller monitors which is not needed. Is there a way/code to prevent horizontal scrolling?

Thanks!

2

Hello Tom

the horizontal scroll appears to allow access to all of the elements since you placed them out side the grid. you can’t disable it. however you can prevent it from showing by placing all your elements inside the grid or you can check the resolution and based of that you show elements with a corresponding size.

Massa

3

Hi Massa,
I dont have any elements out side of the gird but there is still a horizontal scroll that appears? is there any way to fix this ?

4

Hello Noel

make sure you don’t have elements out side the grid that you didn’t notice (use Ctrl + m to navigate through the editors elements).
you can contact the support for further help: contact@wix.com

Massa

5

mine side scrolls on every page. There are no elements outside the lines… really confused please help

6

I’m also having this issue with my site, the only thing I can see that takes up room outside is the header. All images are inside strips, nothing is outside of the grid. I have used the extra space too for large monitor users however the scroll is so large.

How can I stop this?

7

Can you add an option to prevent horizontal scrolling? My site has an image that is partially outside of the frame (purposefully) and I don’t want the ability to scroll. It scrolls on a screen taller than a 16:9 ratio, would be perfect if it had a lock.
Go here for the example: https://www.alpine-air.com/knowledge-base

8

My website also has horizontal scrolling ( qilart.com ) Can you please add an option to prevent horizontal scrolling? Bump

9

+1 Can you please add an option to prevent horizontal scrolling? Bump

Same issue here. I have put purposefully images outside the frame, though I didn’t want my website to have a horizontal scroll.

10

@caros-wix Its 2020 and we are still getting this weirdness

Please can this be re looked at

Really bad user experience

11

Hey everyone, I had the same problem (I placed nothing outside gridlines but still horizontal scroll appears). After thorough checking I found out that in the footer of the website(bottom part of the footer), there is a container box which is used to keep the “privacy/terms/conditions” links. This container box is transparent, but it was spread outside of gridlines, I resized it to fit the gridlines and it solved the problem. Most likely you are facing the same thing. Check your headers and footers. Hope this helps!

12

My word of advice would be to center things via the purple snap lines on Wix.

I recently had about one pixel of white space to the right of the screen. The only thing that seemed off was a container box, which always seemed to have a bit of white on the one side, despite it being aligned with other objects and having a standard pixel amount. I tried to even out the pixels, change the “Y” position, etc. and nothing seemed to work.

Was it really that container box, then? IT WAS. All I had to do was align the container box to the center. It didn’t even matter that it had a different pixel amount that everything else (I made it one pixel wider to remove a white spon on the right side of the container box). After all that work and moving EVERYTHING on my website, I center-aligned and it does not go off the screen now and there is no horizontal bar.

13

Use the strip as containers. Strip is responsive because its stretch resource.

14

I was able to add custom code to get rid of the scroll issue, however it interfered with the way the pages were loading. The anchor points weren’t working as expected, and when going from page to page the pages would load at the bottom of the page instead of the top. Not ideal.

I got in touch with Wix about the pages loading issue and they told me it was my custom code causing the problem. I have only one element now on the home page causing the horizontal scroll issue. They told me I could adjust the item to 1903px, which still doesn’t work and is far too big. Or replace it with a strip. The problem is, the effect I have on the element is to fade-in on a timer, the strip allows the fade-in effect but does not give you options to customize it. Right now I have the element set to 1800px, the horizontal scrollbar is still there but the white space is minimal. I would still like to get rid of it altogether but right now this will be okay.

In case anyone wants to try the custom CSS with their project to see if you can get it to work, you can place this within the body of the custom code area and the horizontal scroll issue is fixed. Just be aware of the other issues that might arise. If anyone else has found a solution please share!

html, body { width:100%; overflow-x:hidden; } @media (max-width: 786px){ body{ overflow-x:hidden!important; } }
15

Does this code work? Tested?

<style>
   html, body {
      width:100%;
      overflow-x:hidden;
   }

      @media (max-width: 786px){
      body{overflow-x:hidden!important;}
   }
</style>

This locks the horizontal scroll?

16

Yeah it worked for me, I’ve used it for WordPress sites too. However, like I said, make sure the rest of your site works as expected. That bit of code made my pages load from bottom to top. I managed to activate it for only my homepage, which still doesn’t load as I would prefer it to. If you are familiar with using the google inspector you can find the element that is causing the issue (something that stretches beyond the horizontal capacity of the page) and add that overflow-x: hidden, to just that element. You may or may not need the media query depending on how your site is working on mobile.

17

Hi Amanda! Can you please tell me how to use this code in Wix website editor?

18

How did you fix it, please help

19

Is it fixed, can someone help?

20

@russian-dima Is this fixed