How can I reduce the size of this image on my website?

Store Design

Topic summary

Main issue: The product image on the site appears too large, and the requester seeks a way to reduce it.

  • Initial fix: A member suggested adding CSS in the theme’s timber.scss to set the product image width (e.g., 60%). The requester found 80% looks better on desktop.
  • Mobile problem: At 80%, the mobile layout breaks—text/content does not flow correctly beneath the image (validated by a mobile screenshot). Images/screenshots are central to understanding the visual issue.
  • Follow-up fix: Another CSS change was proposed—adding padding-top: 100% to the product media container—to improve mobile responsiveness and content flow.

Notes:

  • timber.scss is the theme stylesheet where CSS (styling rules) is added.
  • The suggestions focus on responsive CSS adjustments for desktop and mobile.

Status: No confirmation yet that the padding-top change resolves the mobile issue; discussion remains open with the latest action item to test the new CSS on mobile.

Summarized with AI on February 15. AI used: gpt-5.
5

@pf2022
Add this code

.product-single__media {
    padding-top: 100% !important;
}