How do I increase products per row on mobile in Brooklyn theme to 2?

Store Design
1

Hello,

How do I increase products per row on mobile in Brooklyn theme to 2?

At the moment it only shows 1 product per row on mobile.

currently this is how my product page looks like
currently this is how my product page looks like558×801 43.7 KB

2

Hello, @jayboogie

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

3

Thank you for your reply.

My shop link is up863477.myshopify.com

Password: above

I accidentally deleted the password background jpg so you will have to move your mouse around.

If you can help with that also, that would be great!

4

@jayboogie

Thanks for URL.

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
div#CollectionSection {
@media (max-width:767px) {
.medium--one-half {
    width: 50%;
}
}
}
5

Hi Ketan, @KetanKumar

I am wondering if you can help me here as well. I have the same concern, but I use a different theme. Here’s the store’s url: https://kinder-wunder.com

6

@muppal

Yes, i can help you just let me know which section did you like the same way if possible to give me a screenshot so i will guide you

Thanks

7

Hi @KetanKumar

On the collection pages, for example this one https://kinder-wunder.com/collections/boys-rompers in the mobile version. Currently there’s one product per row.

Screenshot_20200914-134917_Chrome.jpg
Screenshot_20200914-134917_Chrome.jpg1080×2280 373 KB

8

@muppal

Thanks

  1. Go to Online Store->Theme->Edit code
  2. Asset->/main.css->paste below code at the bottom of the file.
@media (max-width:767px) {
#custom-products .col-sm-12 {
    max-width: 50%;
}
}
9

@KetanKumar you are amazing! thanks a lot, it works like a charm.

10

@KetanKumar may I ask you if it is possible to show the tiles on the homepage also the same way? i.e. 2 in a row on the mobile?

11

@muppal

Yes, please add this code also

Thanks

  1. Go to Online Store->Theme->Edit code
  2. Asset->/main.css->paste below code at the bottom of the file.
@media (max-width:767px) {
#shopify-section-1597997799069 .col-sm-6 {
    width: 50%;
}
}
12

I did it and it worked but now I have two other issues.

  1. Suddenly between the products there is an empty space instead of a product (attach a picture).

  2. I want to create on the home page a specific collection (best sellers) of 3 products only that will be displayed in large (1 in a row) how to do it?

Strange.png
Strange.png965×902 66.5 KB

13

Hello, @VivoTalis

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

14

http://talis-lines.myshopify.com/

Important to know, the theme currently living on my site is Debut.
But the issues I present to you are in the Brooklyn theme (draft) that I edit in my library because I want to change my site to it.

I think this happened because on the desktop the collection it’s 3 per row, so it makes this look like this on the mobile.

Am I right? how to fix it?

15

@VivoTalis

yes please provide the issue theme url

16

https://talis-lines.myshopify.com/admin/themes/82137448563/editor#/collections/all

That’s the URL you mean?

17

@VivoTalis

KetanKumar_0-1600957717122.png
KetanKumar_0-1600957717122.png1920×1080 415 KB

18

You’re looking at the site that’s just published, but I’m talking about the new Brooklyn theme (draft) that I’m designing for my site to change it soon.

19

@VivoTalis

Thanks for update

yes, please provide Brooklyn theme your store url so i will guide you.

20

Good day @KetanKumar , i am having the same issue with the blank space on mobile after following the steps.

would you kindly help me?

store name: didysow.myshopify.com

Thank you in advance