Make product picture smaller on Dawn theme smaller

Store Design
1

Hi I need help making our product picture on our product page smaller so that our customers don’t have to scroll so much. I tried on my to no avail.

url: topspot.cards

Thanks in advance. Please see picture below.

Screen Shot 2023-10-20 at 2.00.31 PM.png
Screen Shot 2023-10-20 at 2.00.31 PM.png2824×1268 562 KB

2

Hey,

To solved that you can find to assets/section-main-product.css file and change code here:

If you not know where is that file? you can access to:

Admin → Theme → Customize Code → assets → section-main-product.css;

Then change the code here by remove all code from line 41 to 52

JosephK_0-1697853500939.png
JosephK_0-1697853500939.png1260×338 56.6 KB

Then change to:

@media screen and (min-width: 990px) {
  .product:not(.product--no-media):not(.featured-product) .product__media-wrapper {
    max-width: 50%;
    width: calc(50% - 0.5rem);
  }
  .product:not(.product--no-media):not(.featured-product) .product__info-wrapper {
    padding-left: 4rem;
    max-width: 50%;
    width: calc(50% - 0.5rem);
 }
}
3

You have big store with good design and many products, if you need to maintain or develop store, don’t hesitate let me know.