How can I adjust the product grid column number on mobile?

Technical Q&A
1

Hello! I am currently using the “Spark” theme, and I use a collections page as the page with all my products. On the product grid, I can change how many columns there are per row for desktop. However, I cannot change this for mobile, and it seems like my columns per row is stuck at 1 for mobile, which does not look very good. Is there any way I can change this?

2

Hi @Themoderngents ,

Do you want it to show 2 for mobile?

Please send your site and if your site is password protected, please send me the password. I will check it.

3
4

Hi @Themoderngents ,

Go to Assets > theme.css and paste this at the bottom of the file:

@media (max-width: 45em){
	.collection__products {
		grid-template-columns: repeat(2,1fr) !important;
	}
}

Hope it helps!

1 Like
5

Thank you so much!!!

1 Like
6

Hi,

I was wondering if you could help me with a similar issue please.

My website is:

https://dealsforless.store/collections/kitchen

I would like the grid to be 2 columns.

Thank you in advance!