Solved

Make product picture smaller on Dawn theme smaller.

topspotcards
Excursionist
32 1 12

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

 

Accepted Solution (1)

VIEKIN
Shopify Partner
662 79 94

This is an accepted solution.

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

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);
 }
}

 

You can please Like and Accepted Solution if my suggestion helpful. And if you want to customize or develop new feature on Theme or App => Contact to us via Email or Skype.
- Contact Support : Gmail | Skype: live:.cid.309f2fbaceec513

View solution in original post

Replies 2 (2)

VIEKIN
Shopify Partner
662 79 94

This is an accepted solution.

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

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);
 }
}

 

You can please Like and Accepted Solution if my suggestion helpful. And if you want to customize or develop new feature on Theme or App => Contact to us via Email or Skype.
- Contact Support : Gmail | Skype: live:.cid.309f2fbaceec513
VIEKIN
Shopify Partner
662 79 94

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

You can please Like and Accepted Solution if my suggestion helpful. And if you want to customize or develop new feature on Theme or App => Contact to us via Email or Skype.
- Contact Support : Gmail | Skype: live:.cid.309f2fbaceec513