Why aren't my badges where I expect them to be?

Store Design
,

Topic summary

A user is attempting to position product badges in all four corners of product images on their collection page using CSS.

The top-left and top-right badges are positioning correctly, but the bottom-left and bottom-right badges are not aligning flush with the bottom of the images despite using position: absolute and bottom: 0.

The CSS code uses absolute positioning with bottom: 0, left: 0/right: 0, and z-index: auto for the bottom badges.

Note: There’s a typo in the CSS class names - .card_badge vs .card__badge (underscore vs double underscore) which may be contributing to the issue.

Another user offered to help troubleshoot if they could preview the page, but the original poster declined to provide site access.

The issue remains unresolved with no solution provided yet.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Trying to position badges in 4 corners of product image. I cant seem to get the bottom left and right positions all the way at the bottom of the image. What am I missing? Please do not ask for password to me site. I am not allowing anyone access.

CSS

.card_badge.bottom_left {
position: absolute;
bottom: 0;
left: 0;
z-index: auto;
}

.card_badge.bottom_right {
position: absolute;
bottom: 0;
right: 0;
z-index: auto;
}

.card__badge.top_left {
position: absolute;
top: 0;
left: 0;
z-index: auto;
}

.card_badge.top_right {
position: absolute;
top: 0; /** 10px **/
right: 0;
z-index: auto;
}

result is:

KM9260_0-1748627320618.png
KM9260_0-1748627320618.png368×377 62.5 KB

2

Hi @KM9260 Is it already available in your collection page? I can give a try if there is any chance to preview this.
Thanks!