Add space between sold out and quantity box

Highlighted
New Member
18 0 0

I added this code on themes.scss.liquid to hide price when an item is sold out. I followed this thread

.price--sold-out .price__regular, .price--sold-out .price__sale, .price--sold-out .price__unit{
display: none!important;
}

Now, the quantity boxes are not aligned. I would like to add some whitespace under the sold out box so the quantity boxes can align. 

Screen Shot 2020-09-07 at 9.25.24 PM.png

0 Likes
Highlighted
Shopify Partner
602 94 137

Hello @kdc02,

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

 

0 Likes
Highlighted
Shopify Partner
602 94 137

@kdc02,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste below code at bottom of file

dl.price.price--listing.price--sold-out {
margin-bottom: 10px;
}

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com

 

0 Likes
Highlighted
New Member
18 0 0

@Wahab_Ahmad It added a space between sold out box and quantity box but it still didn't align.. You can check the website again as to how it looks after I added the code above. Even when I reduced margin-bottom to 5px, it didn't align. 

0 Likes
Highlighted
Shopify Partner
602 94 137

@kdc02,

1. Go to Online Store->Theme->Edit code
2. Asset->style.css->paste below code at bottom of file

dl.price.price--listing {
line-height: 1.6em;
}

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com

 

0 Likes
Highlighted
New Member
18 0 0

@Wahab_Ahmad I don't have style.scss. I'm using debut theme. I added it to themes.scss.liquid. It made a difference for some of the products, but didn't align all. It is particularly evident on the item beets. The others are okay.

What I noticed is that a bit of space below the price was added to bring down the quantity box a bit. Is it possible to reduce the space above sold out box instead? This would be better. I prefer not having too much whitespace between price and quantity box.

 

 

0 Likes
Highlighted
Shopify Partner
602 94 137

@kdc02, sorry ,it is theme.scss 

0 Likes
Highlighted
New Member
18 0 0

I made some changes to the sizes of the photos instead and have managed to align the particular items that didn't initially align after pasting the codes you gave. Thank you.

0 Likes