Change collection list vertical on mobile view

Store Design
, , , ,

Topic summary

A Shopify store owner needs help converting their mobile collection list from horizontal to vertical layout. They want to display 3 collections initially with an expand button for the rest.

Solution Provided:
Artzen Technologies offered CSS code to be added to the base.css file:

  • Uses flexbox with flex-direction: column for mobile screens (max-width: 768px)
  • Sets collection items to 100% width
  • Centers items with align-items: center

Follow-up Question:
The original poster confirmed the solution works but finds the collections too large on mobile. They’re now asking if it’s possible to display two collections per row instead of one.

Status: Awaiting response on the two-column layout modification.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
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