How can I display two collections in one row on mobile view?

[Digital_Imran]

Hi experts. In the mobile view, I would like to show two collections in one row. Here is an example image

My website link: https://mom-you-clothing-7494.myshopify.com
Password: Yatink

Example. Like this

Right now it is showing like this:

Right now. My store

Any help would be greatly appreciated. Thanks a lot

[GemPages · Accepted solution]

Hello @Digital_Imran 

It's GemPages support team and glad to support you today.

You can follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your theme.css file and paste the following code below: 

@media only screen and (max-width: 480px){
  .list-collections--carousel .list-collections__item-list{
     grid-auto-columns: 43vw;
  }
}

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

[Simonsron]

You may need to modify their mobile side width

[Digital_Imran]

Hi Simonsron. Thank you for your response.
How can I do that?
Shopify codes are familiar to me. Just write the code here. I'll paste it.
I appreciate your help in advance.

[Simonsron]

@media screen and（max-width:750px）{
.list-collections--carousel .list-collections__item-list{
grid-auto-columns:
50vw
;
}
.list-collections__item-list {

1. grid-gap:
10px
;
2. gap:
10px
;

}
}
The first: you need to go back to see if the custom can configure the width
on mobile
The second: if there is no configuration items, the paste into the section,
add a style tags package outside；

Note: because I do not know if other places also try the name of the class,
so I give your CSS code may has some problems, but you said you that can
achieve the desired effect.

##- 请在此行上方输入您的回复 -##

[Simonsron]

@media screen and（max-width:750px）{
   .list-collections--carousel .list-collections__item-list{
      grid-auto-columns:50vw;
   }
   .list-collections__item-list {
      grid-gap:10px;
      gap:10px;
   }
}

[Digital_Imran]

Simonsron, thank you so much for your time and codes. I got the solution. Keep helping others. I wish you the best of luck.  🙂

[Simonsron]

If you need to reduce their spacing, you can add me the code below

@media screen and（max-width:750px）{
   .list-collections__item-list {
      grid-gap:10px;
      gap:10px;
   }
}

[GemPages · Accepted solution]

Hello @Digital_Imran 

It's GemPages support team and glad to support you today.

You can follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your theme.css file and paste the following code below: 

@media only screen and (max-width: 480px){
  .list-collections--carousel .list-collections__item-list{
     grid-auto-columns: 43vw;
  }
}

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

[Digital_Imran]

GemPages, thank you so much. Its work.
I also know about your Shopify app. It's awesome

[GemPages]

I am glad that my solution is helpful to you.

Best regards,
GemPages Support Team

[Digital_Imran]

Hello , Please help me with one more thing

Can you tell me the code for

The first collection bubble should be full, and the second bubble 3/4 part should be visible. So that people can see that they need to scroll left.

[Simonsron · Accepted solution]

Width is set to 50 vw

[Digital_Imran]

Thank you Simonsron. Its work. 🙂