Solved

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

IntechCarl
Shopify Partner
74 0 7

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
7711 1498 1503

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>

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Vinsinfo
Shopify Partner
253 91 83

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.

View solution in original post

Replies 2 (2)

Dan-From-Ryviu
Shopify Partner
7711 1498 1503

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>

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Vinsinfo
Shopify Partner
253 91 83

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.