Changing Column Width for Single Product Page

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

  • Avatar: rudymawer
    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..

    1 Answer
    Avatar: Rose Tyler
    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

  • Viewing 2 results - 1 through 2 (of 2 total)

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

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