Product Page – Image width with CSS

Hi,

I need to define product image size on single product page. I know all about the small, medium or large settings within the theme, but small is too small – and medium to big.

I need product image to be 40% width – and description 60%.

I have tried this CSS, as you have suggested to other earlier, but not really getting the desired result.

.single-product-page .product-images.col-sm-8 {
width: 40%;
}
.single-product-page .entry-summary.col-sm-4 {
width: 60%;
}

Example of page: https://www.greenen.dk/produkt/srixon-z-85-baerebag-marineblaa/

Hello,

Which device do you want to change? Please clarify.

Please add this code to the Theme Settings > Custom CSS > Global:

body .product-image-summary-wrap .product-image-summary .product-image-summary-inner .col-lg-4{
flex: 0 0 60%;
	max-width: 60%;
}
body .product-image-summary-wrap .product-image-summary .product-image-summary-inner .col-lg-8{
flex: 0 0 39%;
	max-width: 39%;
}

This CSS code is for full-width.

Best Regards

Hi Elisa

This works – but should only work for desktop.

Can you fix CSS so only desktop has these settings?

Hello,

Please remove the code from the Global to the Desktop field.

Best Regards

[Author]

Posts