How can I modify the mobile version of my Debut collection page?

[ChristaB]

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!

  

[ChristaB]

Hello, yes it is www.kindness-club.ca

[AvadaCommerce]

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.

[ChristaB]

Sorry this did not work, it removed everything in my collection list and shows as blank.

[AvadaCommerce · 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.

[ChristaB]

@AvadaCommerce  however it still shows the same on the home page.

[AvadaCommerce]

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

[ChristaB]

@AvadaCommerce 

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.

[KetanKumar]

@ChristaB 

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

[ChristaB]

Hello, unfortunately this did not do the trick.