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

Shopify Discussion
1

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
Example. Like this446×518 276 KB

Right now it is showing like this:

Right now. My store
Right now. My store496×591 229 KB

Any help would be greatly appreciated. Thanks a lot

2

You may need to modify their mobile side width

3

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.

4

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

5

@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.

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

6 
@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;
   }
}
7

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

8

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

9

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;
   }
}
10

I am glad that my solution is helpful to you.

Best regards,
GemPages Support Team

11

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.

12

Width is set to 50 vw

13

Thank you Simonsron. Its work. :slightly_smiling_face: