Center single product page content - by Jennifer

This topic has 3 replies, 2 voices, and was last updated 3 years ago ago by Jennifer

  • Avatar: Jennifer
    Jennifer
    Participant
    November 30, 2021 at 16:43

    Hello,

    I am trying to center the content of the product single page with css.

    I used this css but it only centers the text:

    div.product-information-inner
    {
    display: flex;
    justify-content: center;
    text-align: center;
    }

    I am attaching a photo of how it looks.
    Do you have any suggestion on how to center the entire thing?
    Thanks,

    Product single page

    2 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    December 1, 2021 at 15:14

    Hello,

    Add the below code instead of that one

    div.product-information-inner, .product_meta>div, .product_meta>span, .product-share,
    .product-content .woocommerce-variation-add-to-cart {
        display:flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .product-info-wrapper form.cart table.variations td.label, 
    .product-information form.cart table.variations td.label, 
    .product-summary-center form.cart table.variations td.label, .product-information form.cart table.variations td.value {
        text-align: center;
    }
    .single-product .product-information-inner a.reset_variations {
        display: block;
    }

    Regards

    Avatar: Jennifer
    Jennifer
    Participant
    December 2, 2021 at 20:33

    Excelent!
    Thank you very much!

  • Viewing 3 results - 1 through 3 (of 3 total)

The issue related to '‘Center single product page content’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.