Jump to content

Strange padding on sold out button on product details page

Recommended Posts

Hi! I wanted to ask if anyone knows how to remove the padding on the product details page with a sold out item. Somehow the "sold out" sign is not at the same place as the price that was listed before and that's what I want to achieve. I attached this code to remove the price on the page:

.sold-out .sqs-money-native { display:none }
.sold-out .product-details .product-mark.sold-out {
  font-size: 16px;
  font-family: "Helvetica Neue", serif;
  letter-spacing: -0.01em;
  font-weight: 900;

Here are pictures for reference and thanks in advance!

Screenshot 2022-04-25 at 09.32.07.png

Screenshot 2022-04-25 at 09.32.15.png

Link to comment
  • Replies 4
  • Views 266
  • Created
  • Last Reply

Top Posters In This Topic

On 4/28/2022 at 4:07 AM, 9uan said:

Try adding to Design > Custom CSS

/* Sold out spacing */
h1.ProductItem-details-title {
    margin-bottom: 0px !important;
.ProductItem-product-price {
    margin-bottom: 0px !important;
.product-mark.sold-out {
    margin-bottom: 0px !important;


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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...

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.