Hi,
I am using the latest Dawn theme. When I used the collection-list section, I tried to make the collection name center. I modified the Assets/component-card.css file. I added the margin-left and margin-right argument in the card__inner. But then I found out that in the featured-collection section, the product name and information also got centered. I then realized they shared the same css style in the component-card.css.
If I want to center the the collection name and even hover the name onto the image without affecting the featured-collection section, what should I do?
Many thanks,
Elsie
.card--card,
.card--standard .card__inner {
position: relative;
/* margin-left: auto;
margin-right: auto; */
box-sizing: border-box;
border-radius: var(--border-radius);
border: var(--border-width) solid rgba(var(--color-foreground), var(--border-opacity));
}
My solution was:
Step 1:
In Snippets/card-collection.liquid, I added a div after the image’s div. I gave the div a class called centered_title_onImg.
{%- if card_collection.featured_image -%}
{%- endif -%}
Step 2:
In Assets/component-card.css, I added the centered_title_onImg style after the card__media, which controls the position and background-color of the title on the image:
.card__media .media img {
height: 100%;
object-fit: cover;
object-position: center center;
width: 100%;
}
.card__inner:not(.ratio) > .card__content {
height: 100%;
}
/* New added */
.centered_title_onImg{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* background-color: #F7F7F7; */
}
The result was like(I didn’t delete the original card__heading, just for testing):
can you please let me know how can i get the collection name like this on the image
Hi @Elsie-L ,
With that solution can you click the image or only the text??
Thanks
