Smaller collection list on mobile (theme prestige)

Store Design
1

I would like images in the collection list to display smaller on mobile. So that the height of those blocks on mobile becomes a lot smaller so that it is more clear for the customer.

But the image should remain reasonably the same in the display on desktop.

smaller image on mobile.JPG
smaller image on mobile.JPG382×521 26.8 KB

https://wildenbergwear.nl/

2

Hi @Wesley9

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:
@media only screen and (max-width: 500px) {

.CollectionItem__Link.Button {font-size: 11px !important; padding: 14px 14px !important;}
.CollectionItem__Wrapper {height: 200px !important;}

}

Regards,

San

3

@Wesley9

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
@media only screen and (max-width: 470px) {
	.CollectionItem__Wrapper {
		height: 300px !important;
	}
	.CollectionItem__Link.Button {
		font-size: 11px !important;
		padding: 15px !important;
	}
}
4

Hi @Wesley9

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Theme.css

.CollectionItem__Wrapper {
    height: 300px !important;
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly

5

Thanks this one looks very good! Thank you