Product page – too much white space under product image

This topic has 5 replies, 3 voices, and was last updated 2 years, 8 months ago by David.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
February 10, 2023 at 1:33 am #2528179

Søren

Do you have any ideas how to get rid of the white space underneath the product image?

Would it be possible to make just the two columns with images and title/text/attribute/button wider?

February 10, 2023 at 1:39 am #2528189

Fernando
Customer Support

Hi Soren,

You’ll need to restructure your Product Page.

Can you expound more on this? –

Would it be possible to make just the two columns with images and title/text/attribute/button wider?

What do you specifically want to achieve for your layout?

February 11, 2023 at 2:22 am #2529214

Søren

This only applies to desktop but there’s a lot of white space under the images. On tablet/handheld they stack.

My solution would be to make only the image column wider or the ‘text‘ column to have less white space.

Basically I would be happy to loose all that white space under the image on desktop. Does that make sense?

February 11, 2023 at 7:00 am #2529397
David
Staff
Customer Support
Hi there,

you could try something like this:
```
@media(min-width: 1024px) {
    .single-product .summary {
        font-size: 16px;
    }

    .single-product .summary ul {
        margin-left: 1em;
    }

    .single-product .summary p {
        margin-bottom: 0.75em;
    }

    .add-to-cart-panel form.cart,
    .woocommerce div.product form.cart>* {
        flex: 1 0 50%;
    }

    .single-product .container.grid-container {
        max-width: 1400px;
    }

    .single-product div.product>* {
        max-width: 1000px;
        margin: auto;
    }

    .woocommerce div.product div.images.woocommerce-product-gallery {
        max-width: 500px;
        margin-right: 20px;
    }
}
```
It should:

Create wider Image Gallery and Summary row container on wider screens.
This will allow the summary to have wider paragraphs, so they wrap to less rows.
Also remove extra margin spacing, and allow the Variations form and Add to cart to sit on one row if space permits.

That should reduce the white space on larger screen sizes.
February 12, 2023 at 7:16 am #2530305

Søren

You’re a wizard David, thank you! But there are a few glitches with that cart. It behaves differently regarding simple/variable product and sometimes on the same line as the variation attributes.

Would it also be possible to justify the Summary paragraph/text?

February 13, 2023 at 2:34 am #2531155
David
Staff
Customer Support
Yeah i was taking a risk with the Cart / Product variables, and theres not much to be done there, so maybe its best to leave that alone. Revised CSS below with that change and the text justification:
```
@media(min-width: 1024px) {
    .single-product .summary {
        font-size: 16px;
        text-align: justify;
    }

    .single-product .summary ul {
        margin-left: 1em;
    }

    .single-product .summary p {
        margin-bottom: 0.75em;
    }

    
    .single-product .container.grid-container {
        max-width: 1400px;
    }

    .single-product div.product>* {
        max-width: 1000px;
        margin: auto;
    }

    .woocommerce div.product div.images.woocommerce-product-gallery {
        max-width: 500px;
        margin-right: 20px;
    }
}
```
Author

Posts