How to show two products per row on mobile? | Alchemey Theme

Store Design
, ,

Topic summary

A Shopify store owner using the Alchemy theme wants to display two products per row on mobile devices instead of the default single-column layout.

Multiple Solutions Provided:

Three developers offered CSS-based solutions, all following a similar approach:

  • Navigate to Online Store → Theme → Edit code
  • Open the styles.css or base.css file in the Assets folder
  • Add media query code targeting mobile screens (max-width: 767px)
  • Modify product grid width from 100% to 50% or calc(50% - 20px)

Follow-up Request:

The original poster later asked how to apply the same two-column layout to the “LOOK BOOK” page. Developers provided adjusted CSS targeting different column classes (.column.half, .column.third, .column.full and .multi-column.grid.column).

Status: The issue appears resolved, with the poster thanking contributors for their help. All solutions use CSS media queries to override the theme’s default mobile layout without requiring theme file modifications beyond adding custom CSS.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I want to show two products per row on mobile. I can adjust it for desktop but not for mobile.

Does anyone know how to adjust this in the code?

In short: ‘show two products per row on collection page on mobile’

Teddy9_0-1677068043419.png
Teddy9_0-1677068043419.png389×697 64.3 KB

https://717-shop.myshopify.com

Thanks!

Cheers,

Teddy

2

@Teddy9 Hi please change the below CSS value “100%” to “50%”
https://prnt.sc/gT7X59olazZO

If helpful then please Like and Accept Solution.

1 Like
3

Hi @Teddy9

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/styles.css->paste below code at the bottom of the file:

@media screen and (max-width: 767px) {
    .product-list .card {
        width: calc(50% - 20px) !important;
    }
}

I hope it would help you
Best regards,

Richard | PageFly

1 Like
4

Hallo @Teddy9

You can add code by following these steps to change

  1. Go to Online Store → Theme → Edit code > assets > base.css

paste below code at bottom(base.css)

**@media only screen and (max-width: 767px) {**
**.iwishAddWrapColl {**
**width: 50% !important;**
**}**
**.grid.grid--row-gutters.product-list {**
**flex-wrap: wrap !important;**
**display: flex !important;**
**}**
**}**

If you require any further information, feel free to contact me.

Best regards,

5

Thanks!!!

6

…

7

Hey @PageFly-Richard

And if I want the two columns for the LOOK BOOK page? How do I do that?

Thanks again for your help!

Cheers,

Teddy

1 Like
8

@Teddy9 Same change a css to the below one

Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/styles.css->paste below code at the bottom of the file:

@media (max-width: 767px)
.column.half, .column.third, .column.full {
    width: calc(50% - 20px);
}

https://prnt.sc/NDq6Hx4ijtW4

9

Hi @Teddy9 ,

Sure, I’m happy to help you. Let’s try this solution:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/styles.css->paste below code at the bottom of the file:

@media screen and (max-width: 767px) {
    .multi-column .grid .column {
        width: calc(50% - 20px) !important;
    }
}

I hope it would help you
Best regards,

Richard | PageFly

1 Like