Main Product Image smaller on desktop (Dawn)

Store Design
1

Hello everyone,

I would like to have my Main Product Image smaller on desktop. I tried several tutorials and changed the max width % in section-main-product.css file but it didn’t work for me.

I am using Dawn Theme by the way.

Help would be appreciated :slightly_smiling_face:

Thank you!

2

Hey @KC14

Please share your store URL and store password NOT the admin password.

3

Hey @Savior ,

I sent you my store info in DM!

Thank you :slightly_smiling_face:

4

Anyone who knows how to fix this?

All help would be appreciated :slightly_smiling_face:

Thank you!

5

Hi @KC14 ,

Go to Assets > base.css and paste this at the bottom of the file:

@media screen and (min-width: 990px) {
	.product:not(.product--no-media):not(.featured-product) .product__media-wrapper {
		max-width: 40% !important;
		width: calc(40% - 0.5rem) !important;
	}
	.product:not(.product--no-media):not(.featured-product) .product__info-wrapper {
		max-width: 60% !important;
		width: calc(60% - 0.5rem) !important;
	}
}

Hope it helps!

1 Like
6

Hi @LitCommerce ,

Thank you very much, that worked perfectly :slightly_smiling_face:

Appreciate your help!

1 Like