Shopify themes, liquid, logos, and UX
Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!
Hello I am looking for help on my collection page-mobile version for Debut. I have attached how it looks on desktop vs. mobile. How do I remove the faded box beside each collection and remove the title as it is in the image? I'd like the mobile version to look like the desktop version. Thank you!
Solved! Go to the solution
This is an accepted solution.
Hi @ChristaB ,
You can try paste below code at the top of the theme.css file:
@media (max-width: 749px) {
.template-list-collections .collection-grid-item {
padding: 0;
}
.template-list-collections .ratio-container:after {
padding-bottom: 100%;
}
.template-list-collections .collection-grid-item__title-wrapper {
display: none;
}
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
AVADA - Top Rated App for Email, SMS, Popups
Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE
Hi @ChristaB ,
You can follow the instruction below:
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css->paste below code at the bottom of the file:
.template-list-collections .collection-grid-item {
padding: 0;
}
.template-list-collections .ratio-container:after {
padding-bottom: 100%;
}
.template-list-collections .collection-grid-item__title-wrapper {
display: none;
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
AVADA - Top Rated App for Email, SMS, Popups
Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE
sorry for that issue can you try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
@media only screen and (max-width: 749px) {
.template-list-collections .collection-grid-item {padding-bottom: 0;}
.template-list-collections .collection-grid-item__overlay {background-color: transparent;}
.template-list-collections .ratio-container:after {padding-bottom: 100%;}
.template-list-collections .collection-grid-item__title {display: none;}
}
Hello, unfortunately this did not do the trick.
Sorry this did not work, it removed everything in my collection list and shows as blank.
This is an accepted solution.
Hi @ChristaB ,
You can try paste below code at the top of the theme.css file:
@media (max-width: 749px) {
.template-list-collections .collection-grid-item {
padding: 0;
}
.template-list-collections .ratio-container:after {
padding-bottom: 100%;
}
.template-list-collections .collection-grid-item__title-wrapper {
display: none;
}
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
AVADA - Top Rated App for Email, SMS, Popups
Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE
Hi @ChristaB ,
You can try replace previous code by below code:
@media (max-width: 749px) {
.collection-grid-item {
padding: 0 !important;
}
.ratio-container:after {
padding-bottom: 100% !important;
}
.collection-grid-item__title-wrapper {
display: none !important;
}
}
Hope it can help you
AVADA - Top Rated App for Email, SMS, Popups
Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE
I returned everything back to the way it was- my website is now not functioning properly on the mobile version. I click on one product and it takes me to a different one. I will contact shopify support.
User | RANK |
---|---|
134 | |
92 | |
77 | |
68 | |
44 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022