Center Single Product Post

[chadfahlman]

Hello,
I am trying to center the elements in a single product post in Woocommerce. The layout is already centered at 767px and below. Picture that layout at all resolutions.

Can this be done with CSS?

http://www.amore.red/product/pampered-by-a-chef/

[nabeel]

Hey there,

Thanks for writing in! At 767px and below, I only see the columns are stacking up but they are not centered. You want the columns stacking in all resolutions? If yes then add the following code in the Theme Options > CSS:

.single-product.woocommerce div.product .images, .single-product.woocommerce div.product .summary, .single-product.woocommerce .woocommerce-product-gallery__image img {
    float: none;
    width: 100%;
    margin-bottom: 20px
}

Please note that this will make the product featured image blurry in desktop screens as the image is of low resolution itself used for the product featured image.

Hope this helps!

[chadfahlman]

You’re awesome Nabeel! You interpreted my question correctly. I saw that line in the debug menu but wasn’t sure how to manipulate it.

[friech]

Glad we could help, you can find the proper CSS code selector using the Chrome browser Developer Toolbar. For the CSS code itself, I suggest that you get started with this tutorial

Cheers!