Pipeline theme - How to make collection list on mobile to have 2 products per row

Store Design
,
1

Hi there, could you please help with the code to change the collection list to 2 products per row on mobile?

Currently on desktop is set to 2, but mobile is displaying 1 product per row

https://yoonek.com.au/

2

Hi @Tony1992

You can add this CSS code below at the bottom of your theme.css file to check

@media only screen and (max-width: 479px) {
.flickity-grid .product-grid-slide {
width: 48% !important;
}
}
1 Like
3

Hi Dan,

That changed the Tab collection, but not the collection list further below

4

Misunderstood your mean. Please use this code

@media only screen and (max-width: 767px) {
.homepage-collection-grid .grid__item { width: 50% !important; }
}
1 Like
5

Thank you, now the button text is too large, is there a way to scale this appropriately?

6

Add this addition code

.homepage-collection-grid .grid__item .btn--small.uppercase { 
font-size: 11px !important; 
}
1 Like