How do I make the collection grid smaller on certain pages?

[cnrxoxo]

I have a collection list at the top of some of my pages and would like to make them smaller on both mobile and desktop. I want the collection cards to be smaller. I can’t figure out how to do it, any help appreciated. thank you!

(I also would like to apply the changes only to certain pages/templates, not every collection card across the site.)

https://ecig101.com/collections/smoke-shop

[BSSCommerce-HDL]

Hi @cnrxoxo ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file → Save

@media only screen and (min-width: 990px) {
  .grid--5-col-desktop .grid__item {
    width: calc(15% - var(--grid-desktop-horizontal-spacing)* 4 / 5) !important;
  }
}
@media only screen and (max-width: 749px){
 .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item, .grid--peek .grid__item {
     width: calc(40% - var(--grid-mobile-horizontal-spacing) - 3rem) !important;
 }
}

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

[Dan-From-Ryviu]

Hi @cnrxoxo

Please add this code to your theme.liquid file, after in Online Store > Themes > Edit code

{% if collection.id == 440445370641 %}

{% endif %}

[cnrxoxo]

thanks so much!!! that worked almost perfectly!

however – on some of my pages I have more collections and the 2nd row of them is not resized, just on desktop. are you able to adjust that?

thank you!

this is on https://ecig101.com/collections/e-liquid

[rutvik_shop]

Hello @cnrxoxo ,

You can try this code: it might be helpful to you-

Navigate to the Online Store-> Theme-> Edit code-> Assets> base.css → add below the code(bottom).

.grid--5-col-desktop .grid__item {
    width: calc(10% - var(--grid-desktop-horizontal-spacing)* 4 / 5)!important;
}

[BSSCommerce-HDL]

Hi @cnrxoxo , Pls insert this code to your file css:

@media only screen and (min-width: 990px) {
  .grid--5-col-desktop .grid__item {
    max-width: calc(15% - var(--grid-desktop-horizontal-spacing)* 4 / 5) !important;
  }
}

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

[cnrxoxo]

thank you very much, this works perfectly!

[BSSCommerce-HDL]

@cnrxoxo , We are happy to help you solve the problem