brooklyn theme change number of items per row in collection list page

Solved
jtan
Trailblazer
158 4 24

Hi, 

Is it possible to change the number of items per row in the collection list page in mobile view

At the moment it has 2 items per row. I'd like there to be 1 item per row. Similar to what is shown on my homepage. 

collections.png

 

Thanks

 

Jess

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
35891 3587 11605

This is an accepted solution.

can you please add this code

media screen and (max-width: 590px) {
.collection-collage__item.one-half {
    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

View solution in original post

Replies 13 (13)
dmwwebartisan
Shopify Partner
11162 2395 3435

HI

Please send your webshop URL & password.

I will send a solution please wait.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
dmwwebartisan
Shopify Partner
11162 2395 3435

Hey

Please PM me your staff acount details i can do that .

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
jtan
Trailblazer
158 4 24

hi @dmwwebartisan 

is there a way to include a code without logging in.

i dont know how to set up this account.

 

thanks jess 

KetanKumar
Shopify Partner
35891 3587 11605

This is an accepted solution.

can you please add this code

media screen and (max-width: 590px) {
.collection-collage__item.one-half {
    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
jtan
Trailblazer
158 4 24

hi ketan,

 

i added the code but it gave me an error

@media screen and (max-width: 590px)
.collection-collage__item.one-half {
    width: 100%;
}
KetanKumar
Shopify Partner
35891 3587 11605

@jtan 

can you please update 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
jtan
Trailblazer
158 4 24

hi @KetanKumar 

which code do i need to update. 

 

i tried this code but it gave me an error message

@media screen and (max-width: 590px)
.collection-collage__item.one-half {
    width: 100%;
}
jtan
Trailblazer
158 4 24

@KetanKumar thanks for the help

 

forgot to add the extra { }

 

 

KetanKumar
Shopify Partner
35891 3587 11605

Thanks for 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
catalienne
Excursionist
20 1 6

Thanks @KetanKumar I used the code so now my 3 images for my collections list are one per row. I have found that the top image is bigger than the other 2. Also the image is cropped/reduce (i.e I have a full bag in the desktop version - now in mobile the bag is cropped in half).
Also any chance I can move the text down the bottom or even under the images? I have reduced the font but need to move down a bit thanks.

KetanKumar
Shopify Partner
35891 3587 11605

@catalienne 

can you please share store 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
catalienne
Excursionist
20 1 6

just private messaged you thanks