Solved

How to display two collection images per row in mobile view?

Digital_Imran
Shopify Partner
152 2 18

Hello Everyone. In the desktop view, you can see that collection images are normal. When I switch to mobile view, it gets one collection image per raw.


Would anyone be able to give me code to make these collections list two collections per row. 

Store build using Envy theme
Store URL: https://jhirna-1541.myshopify.com/

 

Any assistance you can provide would be greatly appreciated

Problem Solved? ✔Accept and Like solutions to help future merchants.

Do you need high converting Shopify store? with customized graphical banners, hire me.
Message me now to get started. My response time is lightning fast.
Accepted Solution (1)

diego_ezfy
Shopify Partner
2946 564 886

This is an accepted solution.

@Digital_Imran 

 

1. In your Shopify Admin go to online store > themes > actions > edit code

2. In your theme.liquid file, find the </body>(press CTRL + F or command + F on Mac)

3. paste this code right above the </body> tag:

 

 

 

<style>

@media (max-width:749px){
.template-index .collection-grid .indiv-collection-grid-homepage{
max-width: 50%;
}
}

</style>

 

diego_ezfy_0-1686258673512.png

 



If it helps you please click on the "like" button and mark this answer as a solution!

Thank you.


Kind regards,
Diego

 

◦ Follow my blog & youtube for coding tutorials.
Replace page builder apps w/ copy/paste snippets - no monthly fees, no slowing your site down. Use forever.

View solution in original post

Replies 2 (2)

diego_ezfy
Shopify Partner
2946 564 886

This is an accepted solution.

@Digital_Imran 

 

1. In your Shopify Admin go to online store > themes > actions > edit code

2. In your theme.liquid file, find the </body>(press CTRL + F or command + F on Mac)

3. paste this code right above the </body> tag:

 

 

 

<style>

@media (max-width:749px){
.template-index .collection-grid .indiv-collection-grid-homepage{
max-width: 50%;
}
}

</style>

 

diego_ezfy_0-1686258673512.png

 



If it helps you please click on the "like" button and mark this answer as a solution!

Thank you.


Kind regards,
Diego

 

◦ Follow my blog & youtube for coding tutorials.
Replace page builder apps w/ copy/paste snippets - no monthly fees, no slowing your site down. Use forever.
Digital_Imran
Shopify Partner
152 2 18

Thank you so much @diego_ezfy  The code works. 🙂 
Have a great day 

Problem Solved? ✔Accept and Like solutions to help future merchants.

Do you need high converting Shopify store? with customized graphical banners, hire me.
Message me now to get started. My response time is lightning fast.