Horizontal scroll issue, please help :'(

Design help General
1

Read only link of the site

Our shopping website has filter buttons inside a form block for filtering search results. We want the buttons to stay in one line inside a horizontal scroll, regardless of screen size (similar to filter buttons on Pinterest, Instagram search or Google Images). The form block is set to overflow: auto and horizontal scrolling is disabled on the body element using custom code:

<body style="overflow-x: hidden;">

The page is displaying and working as intended on desktop view but displays a huge white space on mobile. I have tried everything and have been at it for a while. Would really appreciate some help on this.

Thanks!

2

Turns out that checkbox and radio button input fields have absolute position applied to them by default which cannot be modified natively as far as I know. This was adding horizontal scrolling to the page. I was able to override this by adding the following custom code in the head section:

<style>
.filters-form-block input{
left:0;
top:0
}
</style>

If someone has a solution to do this without custom code, please let me know.

Thanks!