Showing two collections, mobile version(Brooklyn)

Solved
Highlighted
Excursionist
21 0 2

Hi all!

We are looking to show two colloctions at the same time scrolling down in our home page for the mobile version. 

 

Currently we are only showing one at a time, but if we click on collections it shows two at the same time.


Does anybody know how to fix this?

-Trowul

0 Likes
Highlighted
Shopify Partner
1023 214 463

@TroWul 

 

Go to timber.scss.liquid file and add following code at the end of file:

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

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
1 Like
Highlighted
Excursionist
21 0 2

Thank you @Tejas_Nadpara! You are a legend

It worked partially. It seems like the code skips product number 3 in the collection so it becomes blank and then the rest gets displaced. Any idea about what could be wrong?

0 Likes
Highlighted
Shopify Partner
380 28 48

@TroWul 

Can you share your store URL in order to check the issue and provide you a proper solution?

Thanks & Regards
Akshay Vaghasiya

Shopify Expert | Skype: akshayvaghasiya84
 - Like and Mark as an Accepted Solution if my reply helpful
 - Feel free to contact me on akshayvaghasiya84@gmail.com for any queries
 - Want to modify or custom changes on store hire me .
1 Like
Highlighted
Shopify Partner
380 28 48

@TroWul 

Thank you for sharing store URL with me.

Add below CSS into theme file.

@media (max-width: 767px){
 #CollectionSection .grid-uniform .medium--one-half:nth-child(2n+1){
  clear: both;
 }
}
Thanks & Regards
Akshay Vaghasiya

Shopify Expert | Skype: akshayvaghasiya84
 - Like and Mark as an Accepted Solution if my reply helpful
 - Feel free to contact me on akshayvaghasiya84@gmail.com for any queries
 - Want to modify or custom changes on store hire me .
1 Like
Highlighted
Excursionist
21 0 2

@Akshay_V 

Hmm, now it has gone back to only show one product at the time for the mobile version..

0 Likes
Highlighted
Shopify Partner
380 28 48

This is an accepted solution.

@TroWul 

It is because your have removed CSS that is provided by @Tejas_Nadpara . You have to add both the CSS code to achieve your requirement.

For Instance:

@media only screen and (max-width: 768px){
#CollectionSection .grid__item{width:50%;}
}
@media (max-width: 767px){
 #CollectionSection .grid-uniform .medium--one-half:nth-child(2n+1){
  clear: both;
 }
} 


 

Thanks & Regards
Akshay Vaghasiya

Shopify Expert | Skype: akshayvaghasiya84
 - Like and Mark as an Accepted Solution if my reply helpful
 - Feel free to contact me on akshayvaghasiya84@gmail.com for any queries
 - Want to modify or custom changes on store hire me .
1 Like
Highlighted
Excursionist
21 0 2

@Akshay_V 

Thank you it works perfect now!

0 Likes
Highlighted
Shopify Partner
380 28 48

@TroWul 

Thank you for confirmation.

Thanks & Regards
Akshay Vaghasiya

Shopify Expert | Skype: akshayvaghasiya84
 - Like and Mark as an Accepted Solution if my reply helpful
 - Feel free to contact me on akshayvaghasiya84@gmail.com for any queries
 - Want to modify or custom changes on store hire me .
0 Likes