Change the product page width columns

Note:
Groupthought does not provide any warranty or further support for this code. Use this code at your own risk. The code provided below is only a suggestion. You are responsible for any and all code customizations made to your theme. Please work with a developer or Shopify Expert to ensure proper customization. This code may not work with all versions of of Pipeline or with other code customizations and apps you may have installed. We strongly recommend that you make duplicate of your theme before adding or changing any code in your theme.
This tutorial is intended for use with the Pipeline theme.

This change will make both columns 50%. As a result, your product image area will be reduced thus making the image smaller. The product description area will be increased from 33% to 50%.

To widen the right column on a product page, you'll need to modify this file:

These two lines will need to be modified:

Change both values to be large--one-half. Use the following code to replace both lines:

    {%- assign product_image_width = 'large--one-half' -%}
    {%- assign product_description_width = 'large--one-half' -%}

Result:

Save the file.

Keep in mind that the select and add to cart elements will now be much larger:

The select options can be resized to 67% using this code:

Option 1: Reduce size of Select dropdowns only

/* -- code to make product select options smaller -- */
@media screen and (min-width: $medium) {
.template-product select {
    max-width:67%;
    }
}
/* - end - */

Option 2: Reduce size both Add to Cart button and Select dropdowns

To make the add to cart smaller, use this code instead of the above:

/* -- code to make product select options smaller -- */
@media screen and (min-width: $medium) {
.template-product select, .template-product .add-to-cart__wrapper button {
    max-width:67%;
    }
}
/* - end - */

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Step 2:

Pipeline 4 and higher: Edit snippets/product-form.liquid:

Earlier version of Pipeline before Pipeline 4: Edit snippets/product.liquid:

Use the Find feature (Command-F on Mac or Control-F in Windows) and search for (1):

add-to-cart__wrapper

When you find the right line (2), change the entire line to:

<div class="add-to-cart__wrapper text-center">

Example: