Solved

How to ensure collection is shown 2 columns in a row on mobile only?

Jayne2020
New Member
4 0 0

Hello there,

How can I make the collection for mobile 2 columns in a row as it is now 1 collection per row (picture 1). The view on desktop is perfect (picture 2). I tried including the following code: 

@media screen and (max-width: 375px) {
.collections .collection-wrap, .featured-collections .collection-wrap {
      width: calc(50% - 10px);
    min-width: calc(50% - 10px);
}
}

under asset > theme.scss.liquid but it didn't work (advice taken from https://community.shopify.com/c/shopify-design/home-page-collection-list/m-p/1304574) I posted it under theme.scss.liquid because there is no theme.css found under asset. Appreciate any advice thank you.

 

Screen Shot 2021-09-16 at 5.25.11 PM.png

Screen Shot 2021-09-16 at 5.25.27 PM.png

Accepted Solution (1)
oscprofessional
Shopify Partner
15782 2362 3068

This is an accepted solution.

@Jayne2020 

 

@media only screen and(max-width:600px){
.grid__item.one-quarter.large--one-half.medium--one-half.small--one-whole {
    width: 50%;
}
}

 

Note : If your store is having this media already (for mobile version) then no need to add whole code . Only just add css in that media ie 600px(already exist)

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

View solution in original post

Replies 7 (7)

oscprofessional
Shopify Partner
15782 2362 3068

Hello,
Welcome to the Shopify community!
Please Share your store live url with password (if it password protected) where you want to do modification, so that I will solve your issue here!

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Jayne2020
New Member
4 0 0

Thank you so much for the quick reply! The url is www.evermorekeepsakes.com

 

Thank you!

oscprofessional
Shopify Partner
15782 2362 3068

This is an accepted solution.

@Jayne2020 

 

@media only screen and(max-width:600px){
.grid__item.one-quarter.large--one-half.medium--one-half.small--one-whole {
    width: 50%;
}
}

 

Note : If your store is having this media already (for mobile version) then no need to add whole code . Only just add css in that media ie 600px(already exist)

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Jayne2020
New Member
4 0 0

Worked like magic! Thank you so much!

oscprofessional
Shopify Partner
15782 2362 3068

Your most welcome !

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

Don
Shopify Staff
2752 199 386

Hi there @Jayne2020!

Depending on which theme you are using, how you can get support for this theme will vary.

Could you let me know the name of the theme you're using currently?

You may also be lucky enough to have some members of our Community chip in with their own helpful suggestions, as @oscprofessional has done here!

Should these options not fulfil your needs, you can also consider hiring a Shopify Expert for some coding customisation work for your theme.

Are you working on a print-on-demand store for garments and other products, or are you sourcing or creating your own products?

Do you know what else you need to work on for your store, and would you be working towards your launch day still?

In any case, let us know how we can help out here!

 

Regards,

Don

Don | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Jayne2020
New Member
4 0 0

Hello Don,

 

Thanks for the quick response! My theme should be District, but I hired a developer to modify the theme a while ago so I'm not entirely sure if District is right. Maybe he modified using the District theme. Hopefully this helps.

 

Thanks again.