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!
@elove642
Do you want to keep the photo or remove the whole section like the example below?
Not on that page, on the collection list page,
I would like the titles to be under the photo
@elove642
Like the example below?
If so, go to your collection liquid file, find the below code and delete it
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.
@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. "
sorry, I thought you meant the small photos. I will try that for the big photo. Any ideas on the other?
@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
Oh my, I did that and now I have this:
Check out my site now, its a total mess! sweetcedarsoap.com
@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
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
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;
}
}
