How to make field horizontal scroll

Hej,

I am wondering if anyone could help me to make fields in WPform horizontal scrollable for mobile.

I have a selection page (https://blog.ihopa.com/prylpool/hagersten-prenumerera/) with many items and it gets too big, so I would like to group them. To not have people having to scroll over a lot of items they are not interested to get to the next section it would be great if they would scroll horizontally.

One solution could be to somehow use a CSS class to make a fields width unlimited
The other solution might be to create many more columns (but in mobile wpforms forces them below each other and anyways only allows 3)

I have done exactly what I wanted on a splashpage here:
https://blog.ihopa.com/prylpool/hagersten/medlem/
it also uses a code element that might be somehow reusable.

Thanks for your help

<style>.horizontale > div > div > div > div > div {
flex: 0 0 auto;
padding: 60px;/*add the padding here to space the elements*/
width: 120px; /*adjust this value to be the same as the width you wrote in custom positioning*/
}

.horizontale > div > div {
display: flex!important;
flex-wrap: nowrap!important;
overflow-x: scroll!important;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
margin-right: 10px;
min-height: 240px;
}

.horizontale > div > div::-webkit-scrollbar{
height: 4px;
}

.horizontale > div > div::-webkit-scrollbar-track{
background: rgba(0, 0, 0, 0.1);
}

.horizontale > div > div::-webkit-scrollbar-thumb{
background: rgba(0, 0, 0, 0.31);
}
</style>

<script>
document.addEventListener(“DOMContentLoaded”, function(event) {
const horizons = document.querySelectorAll(‘.horizontale > div > div’);
let isDown = false;
let startX;
let scrollLeft;

horizons.forEach(horizon => {

const links = horizon.querySelectorAll(‘div > div > div’);
horizon.addEventListener(‘mousedown’, (e) => {
isDown = true;
horizon.classList.add(‘active’);
startX = e.pageX – horizon.offsetLeft;
scrollLeft = horizon.scrollLeft;
});
horizon.addEventListener(‘mouseleave’, () => {
isDown = false;
horizon.classList.remove(‘active’);
for (var i = 0; i < links.length; i++) {
links[i].classList.remove(‘noclick’);
}
});
horizon.addEventListener(‘mouseup’, () => {
isDown = false;
horizon.classList.remove(‘active’);
for (var i = 0; i < links.length; i++) {
links[i].classList.remove(‘noclick’);
}
});
horizon.addEventListener(‘mousemove’, (e) => {
if(!isDown) return;
e.preventDefault();
const x = e.pageX – horizon.offsetLeft;
const walk = (x – startX) * 1.6 ;
horizon.scrollLeft = scrollLeft – walk;
for (var i = 0; i < links.length; i++) {
links[i].classList.add(‘noclick’);
}
});
});
});
</script>

The page I need help with: [log in to see the link]