A user wants to redesign their collection list layout to display the collection image with the name positioned below it, rather than overlaid on top. This change cannot be achieved through the theme editor alone and requires custom CSS code.
Proposed Solution:
Key CSS Changes:
The solution involves modifying the .collection-list .collection-card classes to reposition the collection name below the image instead of overlaying it.
Hi, I want to redesign how the collection list is looking on the website, I want to make it such that the image is shown of the collection and under the image the collection name is there and not on top of the image itself, however this is not possible to do without editing the code. Can anyone help me with a code for this please
Website: tabeerhomes.com
Theme: Impact
Collection List Link: https://tabeerhomes.com/collections
Hi @Sauravb ,
May I suggest to update code these steps:
.collection-list .collection-card .content-over-media{
display: flex;
flex-flow: column;
}
.collection-list .collection-card .collection-card__content-wrapper .h2 {
color: #000;
}
.collection-list .collection-card .collection-card__content:first-child {
margin: 0;
}
.collection-list .collection-card .content-over-media::before,
.collection-list .collection-card .collection-card__content-wrapper svg {
display: none!important;
}
