Use single column product page

If you'd like to make your desktop product pages look more like the mobile version where the product image is full-width and first, then followed by the product description and Add to Cart button below - You can use this code modification:

After:

Since all content is in the same column, the Add to Cart and variant selection options will be wider as well. 

Code:

/* -- code to force full-width product pages -- */
@media only screen and (min-width: $medium) {
    .product-single .large--one-whole {
        width:100%
    }

    .product-single .large--one-third {
        width: 70%;
        margin-left: 15%;
        margin-right: 15%
    }

    .product-single .large--two-thirds {
        width: 100%
    }

    .product__related {
        margin-bottom: -90px;
    }
	.product-description li {
      text-align:left;
    }  
}
/* - end - */

Save the file.

Where do I add the code?

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

Where to add your CSS style code