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

Solved

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

IntechCarl
Shopify Partner
78 0 8

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:

IntechCarl_0-1708394369564.png

IntechCarl_1-1708394381138.png

 

 

Accepted Solutions (2)

Dan-From-Ryviu
Shopify Partner
10887 2145 2282

This is an accepted solution.

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>

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- 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: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Vinsinfo
Shopify Partner
485 165 167

This is an accepted solution.

@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.

priyavinsinfo_2-1708437208105.png

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

priyavinsinfo_3-1708437319138.png

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);
  }
}

priyavinsinfo_4-1708437747496.png

 

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

Replies 2 (2)

Dan-From-Ryviu
Shopify Partner
10887 2145 2282

This is an accepted solution.

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>

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- 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: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Vinsinfo
Shopify Partner
485 165 167

This is an accepted solution.

@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.

priyavinsinfo_2-1708437208105.png

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

priyavinsinfo_3-1708437319138.png

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);
  }
}

priyavinsinfo_4-1708437747496.png

 

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