Trying to change the titles in a collection list using the Brooklyn theme

Store Design
1

Hey! I’m trying to remove the titles from underneath the images in a collection list page. I would like the titles to be inside of the boxes like it is on my homepage.

Here’s the titles I’m trying to remove from underneath the collection images inside of my collections list page.

Titles underneath collections
Titles underneath collections1920×1156 227 KB

Here is the style I would like to retain throughout the entire site. (This is on my homepage)

Titles in the middle of the collection images
Titles in the middle of the collection images1920×1156 274 KB

2

Hi @Neuromind ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

3

Hey, thanks for the quick reply! The URL is www.neuromindart.com and the password is Neuromind. Thanks again!

4

Hi @Neuromind ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/timber.scss->paste below code at the bottom of the file:
#artwork .grid__item {
    position: relative;
    margin-bottom: 25px;
}
#artwork .grid__item .collection-grid__item-title {
    position: absolute;
    z-index: 9;
    height: 100%;
    width: calc(100% - 30px);
    left: 30px;
    top: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#artwork .grid__item .collection-grid__item-title a {
    color: #fff;
}
@media (max-width: 590px) {
    #artwork .grid__item .collection-grid__item-title {
        left: 15px;
        width: calc(100% - 15px);
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

5

It worked perfectly! Thank you. =]

Is there a way to make the text a little smaller? It will only let me set the base text size of the font to 14px. Also is there a way to remove the text completely if I wanted that as an option?

Thanks again! You’re a lifesaver =]

6

Hi @Neuromind ,

You can try below code to change font size in timber.scss file:

#artwork .grid__item .collection-grid__item-title a {
    font-size: 14px;
}

You can change 14px to match your theme. If you want remove, then maybe change font-size: 0px

Hope it can help you.

7

Thank you so much! Super useful information. =]