Increased the columns in Collection List but want to decrease for one section on mobile - Dawn Theme

[lushpupco]

I'm happy with the collection list on my homepage showing 6 columns for the first and third instance, but the second instance I'd like to show only 4 columns. Is this possible? If not, could I center the section?

www.lushpupco.com

Happy with this section (working on the font size)

Would like this section to be larger or centered

[BSSCommerce-HDL · Accepted solution]

Hi @lushpupco, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media only screen and (max-width: 767px) {
.section-template--22975037571359__collection_list_j6Wkr8-padding .slider-mobile-gutter .collection-list {
  grid-template-columns: repeat(4, 1fr) !important;
 }
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[lushpupco]

Thank you, this is perfect!

[BSSCommerce-HDL]

@lushpupco, No problem. Glad to help you 😍

[Dan-From-Ryviu]

Please add this code in Custom CSS of that section to make it show 4 in the second section

@media (max-width: 750px) {
    .collection-list {
        grid-template-columns: auto auto auto auto !important;
    }
}

[Tech_Coding]

Hello @lushpupco 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px){
   #shopify-section-template--22975037571349__collection_list_GUWbtw h3.card__heading a {
       font-size: 9px !important;
   }
   .slider-mobile-gutter .collection-list {
       grid-template-columns: auto auto auto auto !important;
    }
}
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[Rahul_dhiman]

Hello @lushpupco 
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> section-collection-list.css
add this code at the end of the file.

ul#Slider-template--22975037571359__collection_list_j6Wkr8 {
grid-template-columns: auto auto auto auto !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks