Return to previous page

Changing Column Width for Single Product Page

This topic has 2 replies, 2 voices, and was last updated 7 years, 2 months ago ago by Rose Tyler

rudymawer

Participant

September 24, 2017 at 11:08

We are using the 3 column layout for the Single Product Page and its pretty much how we want it, but we are running into some issues with the far right column’s width cutting off some of the content into multiple lines. I believe its set to 25% width, but we would like to increase that to 30%ish and reduce the far left column with the product image to be slightly smaller. When reducing it via CSS, it kicks the center column off.

Here is the example page

https://www.caplabs.com/shop/dhea-100mg/

What is the CSS to modify these column widths, it seems they have some complex media queries that override what we do based on page width..

#173247 Copied Theme version: newest WooCommerce version: newest

1 Answer
Rose Tyler

Support staff

September 25, 2017 at 09:57
Hello,

You may use this code in Theme Options > Styling > Custom css:
```
.single-product .product-information {
    width: 40%;
}
.single-product .product-side-information, .single-product .product-images {
    width: 30%;
}
```
Regards
#173320 Copied
Viewing 2 results - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.Log in/Sign up

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder

Kids Store – WordPress WooCommerce Theme

lazy-placeholder

Organic Store 01 – WordPress WooCommerce Theme

lazy-placeholder

Boxed Store – WooCommerce Theme

lazy-placeholder

SEO Agency – WordPress WooCommerce Theme

lazy-placeholder

Gym Store – WordPress WooCommerce Theme

lazy-placeholder

Electronics Store – WordPress WooCommerce Theme

lazy-placeholder

Phone Service – WordPress WooCommerce Theme

lazy-placeholder

Organic Store – WordPress WooCommerce Theme

lazy-placeholder

Furniture Store – WooCommerce Theme

lazy-placeholder

Classic Fashion Store – WordPress WooCommerce Theme

See All Templates

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