All things Shopify and commerce
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:
Solved! Go to the solution
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.
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.
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.
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.
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.
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.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025