Venture Theme Change collection size on mobile view

Solved
Max_Müller
Tourist
10 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 

0 Likes
KetanKumar
Shopify Partner
20578 2130 7791

@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
0 Likes
CANDISOFT
Shopify Partner
1103 146 480

@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
10 0 2

@CANDISOFT 

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?

0 Likes
Max_Müller
Tourist
10 0 2

@KetanKumar @CANDISOFT 

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
20578 2130 7791

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
CANDISOFT
Shopify Partner
1103 146 480

@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.
0 Likes
Max_Müller
Tourist
10 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

0 Likes
KetanKumar
Shopify Partner
20578 2130 7791

@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
0 Likes