How to fix the icon size and spacing in my collection page

IntechCarl · ‎02-19-2024

Hi everyone,

I have issues in my collection page in mobile view. The icons at the bottom are larger than the other icon above. And there's this space between the group of icons.
Store URL: thecleanroom.net
See photo for reference:

Dan-From-Ryviu · ‎02-19-2024

Hi @IntechCarl

You can solve it by adding this code to theme.liquid file after <head> in Online Store > Themes > Edit code,

<style>
@media (max-width: 989px) {
  .section-collection-list .grid--1-col-tablet-down .grid__item {
    max-width: 33% !important;
  }
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"! Support me: Donate!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Vinsinfo · ‎02-20-2024

@IntechCarl There are two sections used to display the icons in the collection page. Please follow below steps to reduce the space between them and reducing the icon size. Please let me know whether it is helpful for you. If you need further assistance, don't hesitate to contact us.

Reduce the space between sections:

1. Go to "Online Store" -> "Themes", click "Customize" button in the current theme.

2. Go to the collection page, select the first "Collection list" section under the template.

3. Then, reduce the "Bottom padding" to 4px.

4. Then, select the second "Collection list" section and reduce the "Top padding" to 0px.

Now, the spaces between the sections will be reduced.

Reducing the icon size:

1. Select the second "Collection list" section and paste below code in the "Custom CSS" field.

@media screen and (max-width: 749px) {
  .collection-list .collection-list__item {
    max-width: calc(33% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }
}

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

View solution in original post

Dan-From-Ryviu · ‎02-19-2024

Hi @IntechCarl

You can solve it by adding this code to theme.liquid file after <head> in Online Store > Themes > Edit code,

<style>
@media (max-width: 989px) {
  .section-collection-list .grid--1-col-tablet-down .grid__item {
    max-width: 33% !important;
  }
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"! Support me: Donate!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Vinsinfo · ‎02-20-2024

@IntechCarl There are two sections used to display the icons in the collection page. Please follow below steps to reduce the space between them and reducing the icon size. Please let me know whether it is helpful for you. If you need further assistance, don't hesitate to contact us.

Reduce the space between sections:

1. Go to "Online Store" -> "Themes", click "Customize" button in the current theme.

2. Go to the collection page, select the first "Collection list" section under the template.

3. Then, reduce the "Bottom padding" to 4px.

4. Then, select the second "Collection list" section and reduce the "Top padding" to 0px.

Now, the spaces between the sections will be reduced.

Reducing the icon size:

1. Select the second "Collection list" section and paste below code in the "Custom CSS" field.

@media screen and (max-width: 749px) {
  .collection-list .collection-list__item {
    max-width: calc(33% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }
}

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

How to fix the icon size and spacing in my collection page

How to fix the icon size and spacing in my collection page

Community Blog Articles