Brooklyn theme product size from desktop to mobile

Solved
Highlighted
Excursionist
16 0 6

Hi I have 2 issues I am looking at with image resizing from desktop to mobile.

 

My collections on home page is in a 9 x 9 grid which is fine, but when I go to mobile it is only one product taking up the width of the phone which is bad for customers as it requires too much scrolling to see what is available. I was hoping I could get 2 products showing based on the width of the phone.

 

This is the same issue I have when anyone goes to any of my product pages.

 

My site is www.ralphilogical.com and was wondering if anyone had any easy code fixes to fix it and which file needs to be changed.

 

Thanks in advance fro any help. Ralph

0 Likes
Highlighted

This is an accepted solution.

Hello @ralphilogical,

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

@media only screen and (max-width: 590px)  {
#CollectionSection .grid__item.grid-product {
	width: 50%;
}
.grid-product__meta {
	height: 100px;
}
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
2 Likes
Highlighted
Shopify Staff
Shopify Staff
468 66 85

Hi, @ralphilogical,

Hank here from Shopify. 

I see you got some great assistance from @oscprofessional, so be sure to let them know if this works for you!

Outside of that, as you are using Brooklyn, which is a Shopify theme, I can escalate this to our theme developers for you to implement this change if you are on a paid plan. If you wish to go down this route, let me know and I'll investigate further for you.

 

All the best, Hank.

Hank | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Excursionist
16 0 6

Awesome - nice simple easy fix which I thought it would be - worked first go. Appreciate your help. 

0 Likes
Highlighted
Tourist
10 0 2

Hello! I am also using the Brooklyn Theme and already applied the code you just gave above. However, it only worked for a group of collection, not for all my collections. Is there any other code, or the part of #ColectionSection doesn't include all the other collections?

My website is new, the link is https://xn-2i0b75ttzb5vk.myshopify.com/ (we don't have a domain yet) and the password is whahnt.

Thanks!

0 Likes