Creating horizontal scrolling containers / columns

Ok, now I will give also the answer on my question ??

1. First put in a new Columns / Container widget from Stackable.
2. Go to the extra css classes for this Columns / Container widget and add: ‘scrolling-wrapper’ as class.
3. Create 4 columns. For example place in each column an image, heading, paragraph and button.
4. Put a /HTML widget above the Columns / Container and put in the following:

<style>
@media only screen and (max-width: 600px) {
.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
}
.scrolling-wrapper::-webkit-scrollbar { background:transparent;}
.scrolling-wrapper .stk-row {
    flex-wrap: nowrap;
}
.scrolling-wrapper .stk-block {
    min-width: 75%!important;
    display: inline-flex;
}
}
</style>

5. Put the WordPress backend into mobile view and add inside each columns a padding at the right like 20px.

I created an max width of 600px so this code will only execute on mobile devices. At the “.scrolling-wrapper .stk-block” you can change the min-width if you want too.

Good luck!

• This reply was modified 2 years, 7 months ago by Miguel.