How can I control the width of the "Sold Out" sticker on category pages?

20 hours ago, ColinB said:

Site URL: https://encore-refresh.squarespace.com/shop/reduced

Hello

For some reason my Sold Out sticker is different sizes depending on the product title on category pages (see attached graphic).

I have a bit of custom CSS for styling but even with that removed the text ("Sold Out") sometimes breaks into two lines and sometimes it doesn't. I can hack about CSS to get stuff to do what I want most of the time in Squarespace but this layout seems to be using flexbox which I just can't get my head around with regards to how to force my sticker to be the same size on every product. I've tried all manner of CSS things on the sticker itself but nothing seems to work.

I want it to break into two lines for all products.

Thanks in advance

 

https://encore-refresh.squarespace.com/shop/reduced

Password: golfballs

Try adding to Home > Design > Custom Css

section[data-section-id="6188c24cd1135778c730ad0a"] .product-mark{
  max-width: 60px;
  width: 100%;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

thanks @bangank36 - this is getting there and it seems to work OK, but it weirdly now pushes some of the SOLD OUT stickers to the right causing misalignment with product images. weirdly it's inconsistent in its behaviour - see attached graphic. I'll leave the code in there for the moment so you can see it live.

BTW, I use Chrome plugin Pesticide to help me see how pages are constructed - that what all those grid lines are the screenshot below.

On 1/21/2022 at 5:25 PM, ColinB said:

- this is getting there and it seems to work OK, but it weirdly now pushes some of the SOLD OUT stickers to the right causing misalignment with product images. weirdly it's inconsistent in its behaviour - see attached graphic. I'll leave the code in there for the moment so you can see it live.

 

BTW, I use Chrome plugin Pesticide to help me see how pages are constructed - that what all those grid lines are the screenshot below.

 

 

Try this CSS

.product-mark.sold-out {
    margin-left: 0 !important;
}

thanks @tuanphan and @bangank36 - I appreciate you spending time looking into this.

However,  there's a number of problems.

This code:

.product-mark.sold-out {
    margin-left: 0 !important;
}

removes a left-hand space I'd introduced to give a little space between the sticker and the product title as I consider it to be too close (see attached pic)

also, this code

section[data-section-id="6188c24cd1135778c730ad0a"] .product-mark{
  max-width: 60px;
  width: 100%;
}

whilst it has the kinda desired effect on the category page, it also affects the sticker on the product page by causing the text to force-wrap inside the sticker boundaries which makes it unreadable (see attached pic)

Is there any code I can implement to deal with those issues?

thanks in advance