Solved

extra columns collection list dawn theme

rogerjet
Excursionist
33 0 3

Hi,

 

I have a collection list on my Brands page for my site, I would like to have 3 or 4 columns on mobile view.  I would like to achieve this in the custom css section so it doesn't mess with my other collection lists.

 

I am using Dawn theme version 14.0.0

 

rogerjet_0-1714804507319.png

 

link to my preview https://mt5fbjeokjxqqsqz-69331648824.shopifypreview.com

Accepted Solution (1)
PageFly-Noah
Shopify Partner
1256 222 255

This is an accepted solution.

This is Noah from PageFly - Shopify Page Builder App

 

Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

 

<style>
@media screen and (max-width: 767px){
   .slider-mobile-gutter .collection-list{
      display: grid !important;
      grid-template-columns: auto auto auto !important;
    } 

      .slider-mobile-gutter .collection-list .grid__item {
        width: 100% !important;
        max-width: 100% !important;
    }
}

</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 3 (3)

PageFly-Noah
Shopify Partner
1256 222 255

 

This is Noah from PageFly - Shopify Page Builder App

Hi @rogerjet Iam sorry, I dont see this section in your page, You can send and url show this section?
Thank you so much

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

rogerjet
Excursionist
33 0 3

Hi @PageFly-Noah ,

 

Not sure how to give a link to my unpublished site page please click shop brands...see image below

rogerjet_0-1714805498059.png

 

https://mt5fbjeokjxqqsqz-69331648824.shopifypreview.com/pages/brands

 

Worked it out...

Thanks

PageFly-Noah
Shopify Partner
1256 222 255

This is an accepted solution.

This is Noah from PageFly - Shopify Page Builder App

 

Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

 

<style>
@media screen and (max-width: 767px){
   .slider-mobile-gutter .collection-list{
      display: grid !important;
      grid-template-columns: auto auto auto !important;
    } 

      .slider-mobile-gutter .collection-list .grid__item {
        width: 100% !important;
        max-width: 100% !important;
    }
}

</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.