Multi column view on mobile

baileyymans
Shopify Partner
10 0 2

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.

 

Screenshot 2024-04-08 at 18.14.51.png

 

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

 

Reply 1 (1)

Moeed
Shopify Partner
3805 962 1193

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:

Moeed_0-1712604578252.png

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️