Removing collection title from collection images (Debut theme), no code is working HELPPP

Solved
CailaSelby
Tourist
8 0 3

Hi all, 

site: https://lemonsagedesigns.com

I've just spent the last two hours researching what code is needed to do this simple action and nothing is working. Before I get to the point of slinging my laptop out the window I figured I'd post a plea for help. I know there are already several posts about this exact topic but none of the code in any of those posts work for me. I want to remove the collection title from the collection image, and ideally, add it below the image but if needed I'll just change the photos to include the title. Screenshot below. I've also listed the codes I already tried. I added it to the theme.css.liquid file, collection-list.liquid file, and even tried editing the collection.liquid file. I checked my store each time I made a change and when it didn't work reverted the file to how it was previously. I have also tried the below codes with !important and with various h1, h2, etc. 

.collection-grid-item__title {
    display: none;
}
.collection-hero__title { display: none; }
.collection-collage__item-wrapper .collection-grid__item-overlay::after{background-color: transparent;}
.collection-grid__item-title--wrapper{position: relative;}

Untitled design-161.png

 

Accepted Solutions (2)

Accepted Solutions
drakedev
Shopify Partner
618 132 178

This is an accepted solution.

Can you try to add the following code to the end of theme.css file?

It should move the collection title under the image.

 

@media only screen and (min-width: 750px) {
    .collection-grid-item {
        margin-bottom: 60px;
    }
}
.collection-grid-item__title {
    color: #000;
    text-shadow: none;
    -ms-transform: none;
    -webkit-transform: none;
    transform: none;
    margin-top: 5px;
}

 

If my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.

View solution in original post

drakedev
Shopify Partner
618 132 178

This is an accepted solution.

You can add a bit of spacing by increasing the margin-bottom value from 22px to 40px, for example

.collection-grid-item {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    margin-bottom: 40px; /* tune this value */
}

 

If my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.

View solution in original post

Replies 6 (6)
drakedev
Shopify Partner
618 132 178

This is an accepted solution.

Can you try to add the following code to the end of theme.css file?

It should move the collection title under the image.

 

@media only screen and (min-width: 750px) {
    .collection-grid-item {
        margin-bottom: 60px;
    }
}
.collection-grid-item__title {
    color: #000;
    text-shadow: none;
    -ms-transform: none;
    -webkit-transform: none;
    transform: none;
    margin-top: 5px;
}

 

If my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.
CailaSelby
Tourist
8 0 3

@drakedev You're my hero!

This was so stupidly frustrating and you provided exactly what I needed. Putting it at the bottom of the file didn't work so I found where that code is within the file and edited it based on what you provided. 

@media only screen and (min-width: 750px) {
.collection-grid-item {
margin-bottom: 60px; } }

.collection-grid-item__title {
color: #000;
position: none;
text-align: center;
font-size: 18px;
width: 100%;
top: 50%;
padding: 0 5px;
-ms-transform: none;
-webkit-transform: none;
transform: none;
transition: none;
text-shadow: none;
hyphens: none; }
@media only screen and (min-width: 750px) {
.collection-grid-item__title {
padding: 0 15px; } }

 

Thank you so much!

CailaSelby
Tourist
8 0 3

@drakedev one thing I just noticed - on mobile the collection titles run into the image for the collection below it. Any advice on how to adjust this? I tried adjusting a few things but they didn't work.. screenshot below of what I'm talking about as well as my current code. 

Screenshot 2021-08-15_09-41-16-490.png

.collection-grid {
margin-bottom: -22px;
overflow: auto; }

.collection-grid-item {
position: relative;
width: 100%;
padding-bottom: 100%;
margin-bottom: 22px; }
@media only screen and (min-width: 750px) {
.collection-grid-item {
margin-bottom: 60px; } }

.collection-grid-item__title {
color: #000;
position: none;
text-align: center;
font-size: 18px;
width: 100%;
top: 50%;
padding: 0 15px;
-ms-transform: none;
-webkit-transform: none;
transform: none;
transition: none;
text-shadow: none;
hyphens: auto; }
@media only screen and (min-width: 750px) {
.collection-grid-item__title {
padding: 0 15px; } }

drakedev
Shopify Partner
618 132 178

This is an accepted solution.

You can add a bit of spacing by increasing the margin-bottom value from 22px to 40px, for example

.collection-grid-item {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    margin-bottom: 40px; /* tune this value */
}

 

If my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.
CailaSelby
Tourist
8 0 3
GypsyLoves
New Member
2 0 0

All you really have to do, I found out, is add:

 

"VISIBILITY: HIDDEN"

to the bottom of the code under theme.css in your Assets {/} folder.

Here's an example from my store code:

collection-grid-item__title {
    color: transparent; opacity: 10%
    text-shadow: transparent white;
    -ms-transform: none;
    -webkit-transform: none;
    transform: none; opacity: 10%
    margin-top: 5px;
  VISIBILITY: HIDDEN
}

 

 it worked for me with the "Debut" theme.