How to make 2 products per row on home page (mobile) - Lorenza Theme

Store Design
,
1

Hi,

I am looking to create 2 products per row on my home page for mobile only. I would like to keep desktop at 4 products per row. It is using a “Featured Collection Grid” section. On a normal collection page there are built in options that allow me to do that but not for featured collection grids on my homepage.

Any help would be appreciated.

here the website: houseofdakh.com

Thanks in advance

2

@ELBOY ,

Step 1. Go to Admin → Online store → Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code before

Result in mobile:

BSSCommerceB2B_0-1725851570600.png
BSSCommerceB2B_0-1725851570600.png474×917 184 KB

3

Hi @ELBOY

Please add this code to Custom CSS of that section

.grid-display {
  grid-template-columns: repeat(2, 1fr);
}
4

Hi,

So it has worked for the mobile view but now on desktop it is only showing 1 column and it is full width. I need the desktop to be 4 products per row.

**Edited Forgot to try with incognito / clearing cache.

It works thanks for the help!

Any help?

Thanks

1 Like
5

@ELBOY , no problem. Glad to help you :blush: