Collection List Page, Want Title UNDER the photo

[elove642]

Hi there, 

I've got two issues that are driving me nuts, I hope you can help!

Debut theme

I am trying to make the collection names on the collection page, go underneath the photo, not overlay as they do now. I don't want them on the photo, but underneath.

Now, the main photo at the top when you click onto the collection itself. I would like that text to be removed completely. I feel like its redundant because you have already chosen the collection you want. 

Website is sweetcedarsoap.com

Please help me! 

[JohnFromJotting]

@elove642 

Do you want to keep the photo or remove the whole section like the example below?

[elove642]

Not on that page, on the collection list page,

I would like the titles to be under the photo

[JohnFromJotting]

@elove642 

Like the example below?

If so, go to your collection liquid file, find the below code and delete it

<header class="section-header text-center">
    EVERYTHING INBETWEEN
  </header>

[elove642]

No, that is what it looks like now. I don't want words on the photos, I want them under them. So the soaps box would have "soaps" under the photo, not overlayed.

[JohnFromJotting]

@elove642 

I was talking about the second issue not first

"Now, the main photo at the top when you click onto the collection itself. I would like that text to be removed completely. I feel like its redundant because you have already chosen the collection you want. "

[elove642]

sorry, I thought you meant the small photos. I will try that for the big photo. Any ideas on the other?

[JohnFromJotting]

@elove642 

Ok, there are a few things you need to complete here.

Desktop:

Go to your theme.scss file.

Find

.collection-grid-item__title {
    color: #fff;
    position: absolute;
    text-align: center;
    width: 100%;
    top: 50%;
    padding: 0 5px;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: 100ms cubic-bezier(0.44, 0.13, 0.48, 0.87);
    text-shadow: 0 0 4px rgba(0,0,0,0.4);
    hyphens: auto;
}

Replace it with, this should make your text make and underneath the pictures

.collection-grid-item__title {
    color: #000;
    position: relative;
    text-align: center;
    width: 100%;
    top: 50%;
    padding: 0 5px;
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: 100ms cubic-bezier(0.44, 0.13, 0.48, 0.87);
    hyphens: auto;
}

the final change, find the below and change 30 to 50:

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

 This should solve desktop we will need to change mobile, once that is done let me know we can do mobile. Final result should look like below

[elove642]

Oh my, I did that and now I have this:

Check out my site now, its a total mess! sweetcedarsoap.com

[JohnFromJotting]

@elove642 

Looks good to me, where do you see this error? I am on the front page it shows me no errors, the changes also seemed to work.

If all good let me know we can fix the mobile view aswell

[elove642]

I had to hire an expert this morning to fix it. The screen shot is what it looked like after I changed the code. It was those big black letters and nothing else

[rchahade]

Hello John,

I am having the same issue. My collection list page is https://ecobone-pet.myshopify.com/collections

Can you help me with that?

The code in my theme.scss filter is:

.collection-grid-item__title {
color: $color-overlay-title-text;
position: absolute;
text-align: center;
width: 100%;
top: 50%;
padding: 0 5px;
@include transform(translateY(-50%));
transition: $transition-link-hover;
text-shadow: 0 0 4px $color-text-shadow;
hyphens: auto;

@include media-query($medium-up) {
padding: 0 15px;
}
}