Boundless theme- text overlay on collection photos

[Alchemistco]

Hi all!

I’m having a bit of trouble with the text overlay on my product photos in the collections section. It looks fine on a browser, as the collection name will fade when cursor is run over the image. However, on a phone, it just displays the word over the image which looks super messy.

How do I move the collection name to under the photo and not over the photo?

Thank you so much in advance!!!

Website: https://www.alchemistco.com.au/collections

[dmwwebartisan]

@Alchemistco

1. Go to Online Store->Theme->Edit code 2. Asset->/theme.scss.liquid ->paste below code at the bottom of the file.

@media only screen and (max-width: 749px){
.collection-grid__item { padding-bottom: 50px !important;}
.collection-grid__link-overlay { overflow: initial !important;}
.supports-csstransforms3d .collection-grid__title {top: 110% !important;}

}

Thanks!

[Zworthkey]

Hii, @Alchemistco
Kindly share your store password so,
I can solve your issue.
Thnak You.

[Alchemistco]

Hi there!

Thanks

password: alchemy

Much appreciated!

[Alchemistco]

Hi there!

Thanks

password: alchemy

[dmwwebartisan]

@Alchemistco

1. Go to Online Store->Theme->Edit code 2. Asset->/theme.scss.liquid ->paste below code at the bottom of the file.

@media only screen and (max-width: 749px){
.collection-grid__item { padding-bottom: 50px !important;}
.collection-grid__link-overlay { overflow: initial !important;}
.supports-csstransforms3d .collection-grid__title {top: 110% !important;}
}

[Alchemistco]

Thanks so much, it worked!

Just one more question: how can I create more space between the collection title and the picture?