Make collection list from top to bottom on mobile

[orhl1234]

how can I make the collection list to be from top to bottom instead of the slide? 

https://kuvq35v048r9s4jn-52839809193.shopifypreview.com

thanks in advance

[Sangeetanahar]

Hello @orhl1234 

1.Go to online store ---------> themes --------------> actions ------> edit code------->assets.............>swiper-bundle.min.css
add this code at the end of the file

@media screen and (max-width: 749px) {

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    
   display: flex;
    
    box-sizing: content-box;
    flex-direction: column;
}
#shopify-section-template--17519328198825__16e24524-2040-41a4-b5ca-3a425d62879b .card-slider .card-slider__slide {
    width: 100%;
}
}

Buy me a Pizza
- If helpful then please Like and Accept Solution.

Thanks

[orhl1234]

I can almost mark it as a solution thank you.

But when you slide accidentally to the right, there is a big white block.
how can it be fixed?

https://czwxibzpqcaohcgx-52839809193.shopifypreview.com

[theycallmemakka]

Hi @orhl1234,

Follow these Steps:

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

<style>
@media screen and (max-width: 749px) {
    #shopify-section-template--17519328198825__16e24524-2040-41a4-b5ca-3a425d62879b .swiper-wrapper {
        position: relative;
        width: 100%;
        height: 100%;    
       display: flex;    
        box-sizing: content-box;
        flex-direction: column;
        gap: 20px;
    }
    #shopify-section-template--17519328198825__16e24524-2040-41a4-b5ca-3a425d62879b .card-slider .card-slider__slide {
        width: 100%;
    }
}
</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[orhl1234]

I can almost mark it as a solution thank you.

But when you slide accidentally to the right, there is a big white block.
how can it be fixed?

[theycallmemakka]

Hi @orhl1234 ,

Can you provide a full screenshot of the issue? Currently on my end, I cannot scroll the section.

Thank you