How can I reduce product image spacing in mobile view?

Store Design
1

Hi,

Following help from @LitCommerce,

for my collection page product images, is anyone able to please provide code that will reduce the spacing between products in mobile view?

2

Welcome to shopify community.

Please share your store URL and if your store is password protected then please provide password too.

Thank you.

3

Hi @LeanneJ12 ,

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

@media (max-width: 767px) {
	.template-collection .products.space_20 .nt_pr {
		margin-top: 10px !important;
	}
}

Hope it helps!

4

Hi @LitCommerce ,

Thank you for the code. Sorry, I don’t think I explained properly, I meant code to reduce the product column spacing as per image attached and not the row spacing.

Best wishes,

Add a heading (19).png
Add a heading (19).png600×1000 232 KB

5

Hi @LeanneJ12 ,

Please add code:

@media (max-width: 767px) {
	.template-collection .products.space_20 {
		margin-right: -4px;
		margin-left: -4px;
	}
	.template-collection .products.space_20 .nt_pr {
		padding-left: 4px !important;
		padding-right: 4px !important;
	}
}
6

Hi @LitCommerce ,

That’s great. Thank you for your speedy and accurate help as always!

Best wishes,

1 Like