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

Accepted Solutions (2)

Accepted Solutions
oscprofessional
Shopify Partner
9218 1566 1935

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. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

oscprofessional
Shopify Partner
9218 1566 1935

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. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

Replies 7 (7)
oscprofessional
Shopify Partner
9218 1566 1935

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. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

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.

oscprofessional
Shopify Partner
9218 1566 1935

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. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

Trvpin
Tourist
16 0 0
JohnandJayne
Tourist
7 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

cabinfruit
New Member
2 0 0

 

Hey, I did this but its making the images not square anymore so putting lines above and below my product image.

Thanks 

IMG_4315.PNG

@oscprofessional 

oscprofessional
Shopify Partner
9218 1566 1935

Hi @JohnandJayne ,

Please share your store url.

If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87