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

[Themoderngents]

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?

[LitExtension]

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.

[Themoderngents]

Themoderngentlemen.co 

[LitExtension · Accepted solution]

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!

[Themoderngents]

Thank you so much!!!!

[DealsForLess]

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!