Solved

Can I display two collections in one row on mobile view in Shopify?

Digital_Imran
Shopify Partner
149 2 18

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 thisExample. Like this

 

Right now it is showing like this:

Right now. My storeRight now. My store

 

Any help would be greatly appreciated. Thanks a lot

 

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 Solutions (2)

GemPages
Shopify Partner
5588 1261 1203

This is an 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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Simonsron
Shopify Partner
699 87 122

This is an accepted solution.

Width is set to 50 vw

banned

View solution in original post

Replies 12 (12)

Simonsron
Shopify Partner
699 87 122

You may need to modify their mobile side width

banned
Digital_Imran
Shopify Partner
149 2 18

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.

 

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.
Simonsron
Shopify Partner
699 87 122
@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.

##- 请在此行上方输入您的回复 -##
banned
Simonsron
Shopify Partner
699 87 122
@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;
   }
}
banned
Digital_Imran
Shopify Partner
149 2 18

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

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.
Simonsron
Shopify Partner
699 87 122

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

GemPages
Shopify Partner
5588 1261 1203

This is an 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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Digital_Imran
Shopify Partner
149 2 18

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

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.
GemPages
Shopify Partner
5588 1261 1203

I am glad that my solution is helpful to you.

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Digital_Imran
Shopify Partner
149 2 18

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.

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.
Simonsron
Shopify Partner
699 87 122

This is an accepted solution.

Width is set to 50 vw

banned
Digital_Imran
Shopify Partner
149 2 18

Thank you Simonsron. Its work. 🙂

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.