Show collections in grids of 2 in mobile - Brooklyn theme

Solved
Trvpin
Tourist
16 0 0

Hi, the problem is that I would like to add one more column to my collections only in mobile, so it has 2 columns instead of one, can someone help me? Thanks.

Anotación 2020-03-12 133051.jpg

My web: https://1rt5b00ob1sa0di4-32087441546.shopifypreview.com

0 Likes

This is an accepted solution.

Hello @Trvpin,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

@media screen and (max-width: 590px) {
#CollectionSection .grid-uniform {
	padding:0;
}
.grid__item.grid-product.medium--one-half.large--one-third {
	width: 50%;
}
}
If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
Trvpin
Tourist
16 0 0

@oscprofessional wrote:

Hello @Trvpin,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

@media screen and (max-width: 590px) {
#CollectionSection .grid-uniform {
	padding:0;
}
.grid__item.grid-product.medium--one-half.large--one-third {
	width: 50%;
}
}

It didn't work as I expected:

Anotación51.jpg

There are some products appearing alone randomly, any solution? Thanks.

0 Likes

This is an accepted solution.

@Trvpin,

Its because of your product title and price font size.So please add below code also

@media screen and (max-width: 590px) {
.grid-product__meta {
	font-size: 13px;
	height: 100px;
}
.grid-product__price-wrap {
	font-size: 13px;
}
.item_with_compareatprice .product-single__price--compare-at {
	font-size: 13px;
}
}
If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
Trvpin
Tourist
16 0 0

Worked perfectly! Thanks @oscprofessional.

0 Likes
JohnandJayne
Tourist
6 0 1

Hi, I have added both sets of coding and it is still listing some items alone. Any help would be appreciated!.

174461184_496265438204154_6248925776640010172_n.jpg

0 Likes