[Resolved] Product short description – can’t center vertically

[Emil]

Hello!

I’m using woocommerce + the latest GP for my online shop and it’s fantastic, but I can’t figure out how to vertically align the entire short description of a product in a single product page in relationship with the product image on its left. I’ve tried again and again, but for the life of me I can’t figure it out.

As an example, here’s a product page for which I’m trying this edit. I’ve tried editing the summary entry-summary section using the following snippet, but this breaks the whole layout:

position: absolute;
 top: 50%;
 transform: translateY(-50%);

Am I looking at this issue the wrong way? Is this even achievable?

Thank you!

[David]

Hi there,

try this CSS:

@media(min-width: 769px) {
    .woocommerce.single-product div.product {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .woocommerce.single-product div.product div {
        flex: 1 0 100%;
    }
    .woocommerce.single-product div.product .woocommerce-product-gallery,
    .woocommerce.single-product div.product .entry-summary {
        flex: 0 0 48%;
    }
}

[Emil]

Hi David!

The solution you provided me with worked like a charm. Thank you so much for your time, I really appreciate it!

Kind regards, Emil.

[David]

Glad to be of help!

[Author]

Posts