Change collection list vertical on mobile view

Store Design
, , , ,
1

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.

Phone view collection list
Phone view collection list624×585 111 KB

2

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_1-1706095250098.png927×543 107 KB

Artzen_tech_0-1706095169753.png
Artzen_tech_0-1706095169753.png1141×512 118 KB

These simple CSS will solve your problem.

Let me know if need further assistance
Regards,
Artzen Technologies

3

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

4

Hello @Artzen_tech Any solution