Correctly size the main product image

Store Design
,

Topic summary

A user is experiencing two issues with their Shopify product page layout:

Main Problems:

  • The main product image width doesn’t match the multi-row images below it
  • The main product image distorts during page resizing, while multi-row images scale properly with contained text

Attempted Solution:
A support representative from Artzen Technologies provided CSS code to add to section-main-product.css, targeting .product--large:not(.product--no-media) .product__info-wrapper with a max-width: 33% property at screen widths above 900px.

Current Status:
The proposed CSS solution did not resolve the issue. The discussion remains open with no working fix identified. Screenshots were shared showing the layout problems, though the image URLs appear corrupted in the thread.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
2

Hi @avk9641
Its Artzen Technologies! We will be happy to help you today.

You can follow the below css which I have mentioned. And check the result.

  1. Go to your Online Store
  2. Edit Code
  3. Find CSS File
  4. Add the following CSS

or change the existing CSS code with the below code I have mentioned. This existing CSS is written in section-main-product.css you can update there, and if you don’t find it their then add the below css which I have shared.

@media screen and (min-width: 990px){
.product--large:not(.product--no-media) .product__info-wrapper{
  max-width: 33%!important;
}
}

Artzen_tech_0-1722945906604.png
Artzen_tech_0-1722945906604.png1365×646 184 KB

If my solution helped you, then please mark it as accepted.

Let me know if need further assistance
Regards,
Artzen Technologies