Multi column view on mobile

[baileyymans]

For my service I have three packages customer can choose from. On my product page, I have a multicolumn of the three packages to display the options to the customers.

When on mobile the columns converge into one column per view horizontally, the user uses the arrows to swipe through. I fear the arrows will not be seen and the user wont understand to scroll through to read all packages.

I know there can be a way to display the columns vertically one after the other, but for user experience I need minimal scrolls.

Is there anyway to:

(1) display all three packages side by side vertically, so they can be viewed at once rather than scrolling through

(2) use current multi column but have the columns change auto after 3/5 seconds like

Dawn theme 13.0.1

Site is www.posablecam.co.uk

Password to access is calleo

[Moeed]

Hey @baileyymans 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
@media screen and (max-width: 767px) {
.slider.slider--tablet {
    display: flex !important;
    flex-flow: column !important;
    align-items: center;
    gap: 20px;
}
.slider.slider--tablet.contains-content-container .slider__slide {
    margin: 0 !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed