Jump to content

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

Recommended Posts

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

screenshot-encore-refresh.squarespace.com-2022.01.19-17_38_11.png

Edited by ColinB
Link to comment
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

screenshot-encore-refresh.squarespace.com-2022.01.19-17_38_11.png

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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.

 

 

sold-out-problem.jpg

Link to comment
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.

 

 

sold-out-problem.jpg

Try this CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

too-close.jpg

product-page-wrong.jpg

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.