[ Flex Theme ] How can I make collection list 2 per row on mobile?

Hello guys I am using the flex theme and so far I love it, The only thing that I need to change for further optimization is to change the Collection list to a “2-per row” view on mobile instead of them being stacked. It does not give me the option to change it in the theme editor. How can I go about changing this with CSS?

1 Like

@Emmanuel_Guzman

Not sure, if it can be done with the CSS but can you please share your store URL?

I will check and see if it can be done.

@Emmanuel_Guzman

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

Hello Ketan,

My theme is currently not live but I can send you the preview theme below. :+1:t3:

https://xaqtftcebats4ijc-18035091.shopifypreview.com

1 Like

@Emmanuel_Guzman

thanks for store url please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/styles.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
@media only screen and (max-width: 798px) {
#shopify-section-1620172194406eb640 .medium-down--one-whole {
    width: calc(50% - 20px);
}
}
2 Likes

Thank you so much for your help! that worked perfectly.

1 Like

@Emmanuel_Guzman

it’s my pleasure to help us

1 Like

Hello,

I have the same problem on the same theme, I tried to add the code you shared but it does not work on my store.

Website : https ://n34y6j5cis1z5bsr-50119377082.shopifypreview. com

@KetanKumar

1 Like

@Melo11

thanks for store url please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/styles.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
@media only screen and (max-width: 798px) {
.collection-list .medium-down--one-whole {
    width: calc(50% - 20px);
}
}
1 Like

@KetanKumar

It’s good, thank you !

1 Like

@Melo11

its my pleasure to help us

@KetanKumar
Hello, I would like to do the same thing on this page, can you help me?

https://k7kep0irf10w9u65-50119377082.shopifypreview.com/

1 Like

@Melo11

oh sorry for that issue i have check your store collection page on mobile now already 2x2

1 Like

Hello,

I’m sorry, it’s for this page :
https://k7kep0irf10w9u65-50119377082.shopifypreview.com/collections

@KetanKumar

1 Like

@Melo11

This preview link has expired
Please contact the store owner for a new link.

Hi there! Could you help me with this? When I try copying your code and pasting it isn’t working. We are using the newest Flex theme from Out of Sandbox and want the mobile display to have two rows instead of one. Thank you!

1 Like

@bb4

yes please share your store url so i will check and update you

@All
if some same isssue please share url