Collection titles underneath images instead of overlayed in center - Debut Theme

Hi there!

I'm trying to figure out if it's possible to have the Collection titles under the images instead of overlayed in the center. I'm using the Debut theme. I'd love to not HAVE to use a dark overlay for all of my images just so people can read the text. 

Also, out of curiosity, is there any way to use a different image for the Collection folders (like in the example) and for the banner on the Collection page?

https://www.kelmurphydesigns.com/collections

Screen Shot 2021-04-28 at 8.50.32 PM.png

Any help that you could give would be amazing!! Thanks in advance! -Kel

g33kgirl
Shopify Partner
223 59 71

Hi @KelMurphy, you can add this code at the end of your CSS file (Themes -> Edit code -> Assets -> theme.css) :

 

.collection-grid-item {
    margin-bottom: 85px;
}

.collection-grid-item__title-wrapper::before {
    display: none;
}

.collection-grid-item__title {
    text-align: center;
    width: 100%;
    color: #000;
    transform: none;
    padding: 0;
    margin: 0;
    position: relative;
    top: 0;
}

 

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
dmwwebartisan
Shopify Partner
5805 1330 1703

@KelMurphy 

Please add the following code at the bottom of your assets/theme.css  file.

/* For Mobile css class */
@media only screen and (max-width: 749px) {
.collection-grid-item {margin-bottom: 80px !important;}
.collection-grid-item__title {
    color:#000 !important;
    position: relative !important;
    top: 100% !important;
    margin: 40px auto !important;
}
}
/* For Desktop css class */
@media only screen and (min-width: 750px) {
.collection-grid-item__title {
    color:#000 !important;
    position: relative !important;
    top: 100% !important;
    margin: 40px auto !important;
}
}

Hope this works.
Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App

@g33kgirl This is great! Thank you SO much! Is there a way for me to change the size of the text - and to remove the shadow behind it?

 

Screen Shot 2021-04-29 at 11.09.06 AM.png

dmwwebartisan
Shopify Partner
5805 1330 1703

@KelMurphy 

Please add the following code at the bottom of your assets/theme.css  file.

.collection-grid-item__title {
    text-shadow: none !important;
    font-size: 20px !important;
}

Hope this works.
Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
g33kgirl
Shopify Partner
223 59 71

Hi @KelMurphy, sure, you can add this code at the end of your CSS file as before:

.collection-grid-item__title {
   text-shadow: none;
   font-size: 22px;
   margin-top:3px;
}
If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
0 Likes