#80097 Vertically align woocommerce error butto in the center on single product page

Landing Forums JupiterX WordPress Theme Vertically align woocommerce error butto in the center on single product page

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • Lynne Sneed

    Hi,

    How can I align the WooCommerce error message button in the center on a single product page on small devices? See the screenshot for it’s alignment now. To reproduce this error, go to https://www.onyxxvillageconnection.org/product/mask-3/ and press add to cart 3 times. Press add to cart for the 4th time, and you will see the message since we only have 3 in inventory.

    Thanks!

     

    Lynne Sneed

    Not just for small devices – how do I align it in the center on any device size?

    Lynne Sneed

    I realized it’s not just error messages. Basically any message on the product page on a small screen size shows the button not in the center (the screenshot shows adding mask 3 just once on a pixel 2)

    Amir Rather Support Team

    Hi There

    Please try this CSS in Jupiter X > Customize > Additional CSS to see if it helps?

    @media handheld, only screen and (max-width: 768px) {
    .woocommerce-message a {
        margin-top: 24px !important;
    }}

    Regards

    Lynne Sneed

    That didn’t work. See the attached image.

    Nodari Support Team

    Hey there

    Please try this code and let me know if it worked:

    @media (max-width: 968px) {
    .single-product .woocommerce-error .button.wc-forward {
        margin-left: 20px !important;
        position: absolute;
        top: 40%;
        right: 5%;
    }
    .single-product .woocommerce-error li {
        width: 50%;
    }
    }

    Thanks

    Lynne Sneed

    This works. Thank you! However now looking at it, it looks kind of cluttered. Is it possible to display the message first then the view cart button after in the right bottom corner?

    Nodari Support Team

    Hello Lynne

    You can manipulate the position of the button buy the top and right values in the code, just change them:

    top: 40%;
    right: 5%;

    Let me know if it worked well 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
You must be logged in to reply to this topic. Login