FROM CACHE - en_header

collection page mobile version for Debut

Solved
ChristaB
Tourist
6 0 1

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!

Screen Shot 2022-03-20 at 6.23.11 PM.png

Screen Shot 2022-03-20 at 6.22.55 PM.png

  

Accepted Solution (1)

Accepted Solutions
AvadaCommerce
Shopify Partner
3879 835 760

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

 

Screen Shot 2022-03-25 at 8.46.14 AM.png

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

View solution in original post

Replies 9 (9)
ChristaB
Tourist
6 0 1
AvadaCommerce
Shopify Partner
3879 835 760

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

KetanKumar
Shopify Partner
35809 3580 11590

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ChristaB
Tourist
6 0 1

Hello, unfortunately this did not do the trick.

ChristaB
Tourist
6 0 1

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

AvadaCommerce
Shopify Partner
3879 835 760

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

 

Screen Shot 2022-03-25 at 8.46.14 AM.png

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

ChristaB
Tourist
6 0 1

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

AvadaCommerce
Shopify Partner
3879 835 760

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

ChristaB
Tourist
6 0 1

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