“Out of stock” button block has no padding below

  • Hi,

    I am experiencing 2 problems with online theme on my wordpress site https://www.everymedical.com.ng

    They are represented as follows;
    A) When a product is out of stock (i changed the default “read more” to “out of stock”), the button block will have no padding below.
    Hence the block ends right at the bottom line of the “out of stock” button.
    This leaves it shorter than the next product if that product is in stock.

    B) I adjusted the font size of the product prize so that they all fit on one horizontal line.
    This means that when a product is on sale, both the old price and the sale price show on one horizontal line.
    This works perfectly on laptops and tablets but it does not work on phones.
    On phones, each price; old price and sales price, occupies a different horizontal line. As a consequence, the “add to cart” button is displaced lower.

    Kindly help proffer solutions to these problems.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello @ezenwakafam ,

    Here are answers to your queries.
    1. Use following custom CSS on Appearance => Customize => Additional CSS

    .woocommerce a.button {
    margin-bottom: 1em !important;
}

    Best Regards!

    Thread Starter ezenwakafam

    (@ezenwakafam)

    Thanks you @codersantosh. This just solved the first problem. Kindly look at the second problem concerning prices of products on sale occupying 2 horizontal lines.

    @ezenwakafam the solution might be using the following CSS

    .woocommerce ul.products li.product .price del {
    position: absolute;
    bottom: 125px;
}

    You can change the value of the bottom.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘“Out of stock” button block has no padding below’ is closed to new replies.