Product Page: Adjust Size of Image & Summary Without Affecting Responsive Design

Replies: 2

Let me say first that the store isn’t live yet, so I’ll be using screen shots rather than a link.

Here’s the issue: on the product page I want to make the image smaller and the summary area larger, yet keep the responsive design. The default is both the image and summary are 48% width. However, when I reduce the window size, both are 100% (see screenshots below).

Image CSS – https://goo.gl/YbuZKU
Summary CSS – https://goo.gl/Ql7F1r
Small Window CSS – https://goo.gl/f5FPjd

To adjust the sizes of the image and summary, I copied the CSS in Chrome DevTools and changed what I wanted. Here’s the code I used:

.woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images {
   width: 28%;
}

.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary {
   width: 68%;
}

The result for a full width screen is great. However, when I reduce the window size, the image and summary do not shift to full width like before, but remain at 28% and 68% (see screenshots below).

Full screen – https://goo.gl/xdyMWM
Small screen – https://goo.gl/WVLSUy

I want to make the image width 28%, summary 68% when viewed on wider screens, and yet maintain the 100% width on smaller screens. Help please?