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

jayboogie
Explorer
58 0 13

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 likecurrently this is how my product page looks like

Replies 73 (73)

KetanKumar
Shopify Partner
36839 3635 11972

Hello, @jayboogie 

Thanks for post.

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
jayboogie
Explorer
58 0 13

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!

KetanKumar
Shopify Partner
36839 3635 11972

@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%;
}
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
muppal
Tourist
4 0 1

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

KetanKumar
Shopify Partner
36839 3635 11972

@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 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
muppal
Tourist
4 0 1

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

KetanKumar
Shopify Partner
36839 3635 11972

@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%;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
muppal
Tourist
4 0 1

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

muppal
Tourist
4 0 1

@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?

 

KetanKumar
Shopify Partner
36839 3635 11972

@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%;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Alanoor
Tourist
6 0 4

Hello, could you please help me? I tried this solution but it doesn’t work for me. I also need to display 2 per row. 

my Shopify is shopalanoor. 

thank you, 

Meriem

KetanKumar
Shopify Partner
36839 3635 11972

@sowjones @Alanoor 

Thanks for post 

both are store is password protect can you please share us.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
sowjones
Tourist
11 0 0

@KetanKumar sorry about that.

password : iackeu

sowjones
Tourist
11 0 0

@KetanKumar Good day,

did you get a chance to look at my website ?

i provided you with the password.

password : iackeu

Hope to hear from you soon

KetanKumar
Shopify Partner
36839 3635 11972

@sowjones 

Thanks for it

yes it can be done some code change it

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
sowjones
Tourist
11 0 0

would you be kind enough to provide me with the coding solution it would be greatly appreciated.

@KetanKumar 

KetanKumar
Shopify Partner
36839 3635 11972

@sowjones 

it takes more time and some code.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
VivoTalis
Excursionist
37 0 7

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

KetanKumar
Shopify Partner
36839 3635 11972

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
VivoTalis
Excursionist
37 0 7

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?

KetanKumar
Shopify Partner
36839 3635 11972

@VivoTalis 

yes please provide the issue theme url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
VivoTalis
Excursionist
37 0 7
KetanKumar
Shopify Partner
36839 3635 11972

@VivoTalis 

KetanKumar_0-1600957717122.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
VivoTalis
Excursionist
37 0 7

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.

KetanKumar
Shopify Partner
36839 3635 11972

@VivoTalis 

Thanks for update

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
sowjones
Tourist
11 0 0

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

jrltrend
Excursionist
42 0 11

hur.png

Do you know why this happend at the mobile version? One picture leaves alone 

KetanKumar
Shopify Partner
36839 3635 11972

@jrltrend 

Sorry for facing this issue, it's my pleasure to help us.

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.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
jrltrend
Excursionist
42 0 11

Thanks @KetanKumar!

Jrl-trend.myshopify.com

password adrianhampus

KetanKumar
Shopify Partner
36839 3635 11972

@jrltrend 

thanks for it 

#CollectionSection .grid-uniform {
    display: flex;
    flex-wrap: wrap;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
jrltrend
Excursionist
42 0 11

Thanks! Appreciate it.  Where to put the code? 

Best regards

KetanKumar
Shopify Partner
36839 3635 11972

@jrltrend 

i think your have already add this code on CSS file right also working fine now 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
td100
Visitor
2 0 1

Hello, if anyone can help me have two products per row in the mobile version of the Brooklyn theme, that would be much appreciated.

I would like there to be two products per row on every collection page for the mobile version. I have tried to copy and paste the codes before and it works, however it leaves a gap in the grid for some reason.

Thanks!

KetanKumar
Shopify Partner
36839 3635 11972

@td100 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
td100
Visitor
2 0 1

Hey @KetanKumar Thanks for the reply!

The store domain name is www.exoticremedy.co.uk

Guest password is iwiwho

Thanks

KetanKumar
Shopify Partner
36839 3635 11972

@td100 

Thanks for the store URL

1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.

@media screen and (max-width: 768px) {
#CollectionSection .grid__item {
    width: 50%;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1405k
Tourist
4 0 4

Hi @KetanKumar 

I am using the Debut theme with Shopify and I would like to have my 3 best selling items presented in one row on my main page (on mobile!). Right now there are 2 on one row and 1 alone on the next one.

Can you please help me out? Thank you very much 🙂

KetanKumar
Shopify Partner
36839 3635 11972

@1405k 


Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1405k
Tourist
4 0 4

Thanks @KetanKumar ! 

The URL is the following: myeasycharge.com

Thanks for the fast reply.

KetanKumar
Shopify Partner
36839 3635 11972

@1405k 

thanks for store url, yes please add this code.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

@media only screen and (max-width: 749px) {
#shopify-section-collection .grid__item {
    width: 100%;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1405k
Tourist
4 0 4

Thanks @KetanKumar 

I am not sure I did it right because now, the products are displayed one-by-one. 
It might be for two reasons; I added the line of code to asset>theme.css.liquid (and not theme.css, I only found .css.liquid). Second I was not sure where to paste it so I did it on top of the file. 

Do you know why that might be? Thanks for your help!

KetanKumar
Shopify Partner
36839 3635 11972

@1405k 

yes, please add your css file 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1405k
Tourist
4 0 4

@KetanKumar I just sent you an email. 
Thank you very much for your help.

KetanKumar
Shopify Partner
36839 3635 11972

@1405k 

ok, Thanks i will check and update 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
thetechjar
Tourist
6 0 2

Hello,

Can someone please help with changing the mobile collection's display to 2 products per row?

My URL is thetechjar.com and I am using the Trademark theme.

Thanks!

Janku
Visitor
1 0 0

Hello Ketan,

I have the same problem with the missing product in some rows.
Do you have a solution for this?

link

Many thanks in advance and best regards

ROOMSHIRO
Visitor
2 0 0

Hi @KetanKumar,

I've tried this solution (product page) but every after each row, there's 1 empty slot..

shatha
Visitor
2 0 2

Hello there @KetanKumar 

Wish you a lovely new year,

I am using the Brooklyn theme and wanted to have my products appear 2 in a row on the mobile. I saw a code posted and I used it.  as you can see below. I just noticed that not all of them appear in rows. Is this normal? Like there is an empty space.  Please see the attached picture.

https://shathadafai.com/collections/all?sort_by=manual

IMG_3962.jpg

Your help is appreciated.

Kind Regards,  

Shatha

KetanKumar
Shopify Partner
36839 3635 11972

@shatha 

oh sorry that issue try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.

 
#CollectionSection .grid-uniform {
    display: flex;
    flex-wrap: wrap;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing