Custom Collection Design - Image & CSS

[Kiwi]

Hi everyone - just wondering if you know how to adjust a custom collection to remove the padding. I want my image to be right to the edge of the collection item border like the attached screenshot.

I tried to use custom CSS class to change the image component but the padding is controlled with the custom collection component and I don’t know how to use CSS class to adjust the padding on custom collection.

[ThinhDinh]

Here’s my best attempt. I haven’t found out what setting is causing the bottom border of the image to have a radius.

The setup is like this. Image > Aspect ratio = Auto, Size = Full.

Custom collection’s class name = “items”.

.items div[class*="max-size-2xl"] > div:first-child {
margin-top: 0px;
}

.items div[class*="max-size-2xl"] > div:first-child div {
--container-x-pad: 0px;
}

[Kiwi]

This is great thank you! I will try it

[Kiwi]

I acheived the bottom flat radius by inserting a seperator and just making it into a thick white line using a border and removing the padding. Looks fab!

.white-line 
{
border-width: 10px;
border-color: #ffffff;
margin-top: -12px; 
}

[Himaladin]

Is this what you are looking for?

.items div[class*="max-size-2xl"] > div:first-child {
margin-top: 0px;border-radius: 0px;
}
.items div[class*="max-size-2xl"] > div:first-child div {
--container-x-pad: 0px;
border-radius: 12px 12px 0 0;
}
.items .image-style-rectilinear, .items .aspect-container img {
border-radius: 12px 12px 0 0;
}

[ThinhDinh]

Looks like it does the trick. Can we make that image a bit bigger?

[Himaladin]

The image here follows the aspect ratio of the source. If the image is a portrait it will be taller. Do you mean fixed size?

@ThinhDinh

Can we make that image a bit bigger?

[ThinhDinh]

Yeah, I just thought it’s a bit far from “CSS Stylist” for my liking.

[Kiwi]

Amazing thank you! Looks fabulous

[Himaladin]

.items div[class*="max-size-2xl"] > div:first-child {
margin-top: 0px;border-radius: 0px;
}
.items div[class*="max-size-2xl"] > div:first-child div {
--container-x-pad: 0px;
border-radius: 12px 12px 0 0;
}
.items .aspect-container img {
border-radius: 12px 12px 0 0;
height: 250px;
}