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

  • Resolved jrothra

    (@jrothra)


    8 years ago

    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?

Viewing 2 replies - 1 through 2 (of 2 total)

  • For different css for smaller viewports you’ll need a media query:

    
/* for 768 or less */
@media only screen and (max-width:768px) {
  .woocommerce etc etc {
     width: 100%;
  }
}
    Thread Starter jrothra

    (@jrothra)

    @lorro —

    Okay, I feel silly now. I should have known to add that. Ah well, we all have overlooked something obvious before. Thank you! ??

    BTW, here’s the media query code I used (in case anyone else wants to do this):

    @media only screen and (max-width:768px) {
   .woocommerce #content div.product div.images,
   .woocommerce div.product div.images,
   .woocommerce-page #content div.product div.images,
   .woocommerce-page div.product div.images,
   .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: 100%;
   }
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Product Page: Adjust Size of Image & Summary Without Affecting Responsive Design’ is closed to new replies.