Change collection list vertical on mobile view.

Digital_Imran
Shopify Partner
146 2 18

I'm using Shopify theme and on mobile view collection list shows horizontally. I want to make the collection list vertical instead of horizontal showing 3 collections and a button to expand to see the rest of the collections. 
Thank you in advance. 

Store URL: https://www.ozonzone.com/

The second section is the collection list. 

 

screenshot 4.png

Problem Solved? ✔Accept and Like solutions to help future merchants.

Do you need high converting Shopify store? with customized graphical banners, hire me.
Message me now to get started. My response time is lightning fast.
Replies 3 (3)

Artzen_tech
Shopify Partner
528 105 104

Hello @Digital_Imran  
Its Artzen Technologies! We will be happy to help you today.

Follow the below steps to solve the issue:-

1) Go to your Online Store
2) Edit Code
3) Find base.css file
4) Add the following CSS at the bottom of the file
5.) Save the File

@media screen and (max-width: 768px) {
.collection-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}
a.collection-item {
    width: 100%;
}
}



Artzen_tech_1-1706095250098.png

 

Artzen_tech_0-1706095169753.png

These simple CSS will solve your problem.

Let me know if need further assistance
Regards,
Artzen Technologies

 

 

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
Digital_Imran
Shopify Partner
146 2 18

Thank you @Artzen_tech for the solution. It looks large on the phone. Can I make it two collections per row?

Problem Solved? ✔Accept and Like solutions to help future merchants.

Do you need high converting Shopify store? with customized graphical banners, hire me.
Message me now to get started. My response time is lightning fast.
Digital_Imran
Shopify Partner
146 2 18

Hello @Artzen_tech Any solution 

Problem Solved? ✔Accept and Like solutions to help future merchants.

Do you need high converting Shopify store? with customized graphical banners, hire me.
Message me now to get started. My response time is lightning fast.