FROM CACHE - en_header

Venture Theme Change collection size on mobile view

Solved
Max_Müller
Tourist
12 0 2

Hey 

I try to figure out how to change the number of the collection that is shown in one row on mobile view.

normally it shows the collections vertically and not horizontally like on desktop.

so I would like to have the collections listed the same way on mobile like on desktop.

 

 

IMG_68234CC74D16-1.jpeg

All three collections side by side. and not like it is shown in the screenshot above

URL is www.trendo-shop.com

 

Thank you very much 

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
34536 3455 11297

This is an accepted solution.

@Max_Müller 

sorry for this issue can you please try this 

@media only screen and (max-width: 749px) {
#shopify-section-featured-collections .grid__item {
    width: 33.333%;
}
}
@media only screen and (max-width: 600px) {
.featured-card {
    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 8 (8)
KetanKumar
Shopify Partner
34536 3455 11297

@Max_Müller 

sorry for this issue 

please confirm your mobile look is this fine?

KetanKumar_0-1620297857800.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
pioneer100
Shopify Partner
1119 145 481

@Max_Müller 
- add below code at the bottom of the file theme.scss

- file path : online store > themes > live theme > action > edit code > assets > theme.scss

@media only screen and (max-width: 600px) {
.grid__item {
    width: 50%;
}
}


 

If helpful, Please Like and accept The Solution.
Max_Müller
Tourist
12 0 2

@pioneer100 

Thank you very much, that helped a little bit 

I set the value to 30% so all 3 collections stay in one row.

Now I need to resize the Title of the collections and it would be nice to increase the number of products shown in the all products tab / also increase the products from each row to 3 

Can you help me with that?

Max_Müller
Tourist
12 0 2

@KetanKumar @pioneer100 

So I tried some things in the meantime and figured something out 

I added this code:

@media only screen and (max-width: 600px) {
.featured-card {
    width: 33%;
}
}

Now it only affects the featured collections and not everything, that's exactly what I needed, but it is still vertically, not horizontally like you see on the screen below:

 

IMG_F13FF44D15F6-1.jpeg

So what do I need to add now, so the collections are side by side and not below each other? 

Thanks 

KetanKumar
Shopify Partner
34536 3455 11297

This is an accepted solution.

@Max_Müller 

sorry for this issue can you please try this 

@media only screen and (max-width: 749px) {
#shopify-section-featured-collections .grid__item {
    width: 33.333%;
}
}
@media only screen and (max-width: 600px) {
.featured-card {
    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
pioneer100
Shopify Partner
1119 145 481

@Max_Müller , I would like to suggest you that for mobile view, you should only show maximum 2 items per row for better conversion rate. if you put 3 in a row then it would be very inconvenient for touch and click on item.

If helpful, Please Like and accept The Solution.
Max_Müller
Tourist
12 0 2

@KetanKumar 

Thank you very much, that fixed it well 👍🏻

Maybe you could help me with more thing...

Bildschirmfoto 2021-05-08 um 10.22.40.png

I would like to have all "show all" text on the same line as I marked on the screenshot there.

I hope you understand what I mean 😅

Thank you very much, sir

KetanKumar
Shopify Partner
34536 3455 11297

@Max_Müller 

Thanks for update please add this code

@media only screen and (max-width: 561px) {
.featured-card__title {min-height: 50px;}
}
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