Product media look weird on products with only one picture

[Tilda_Falth]

Hi!

On products with multiple pictures, the block looks correct with the image starting at the same height as the title.

However, on products with only one image the image is in the center of the block and it looks super off since I want all my product images to start at the same height as the title.

Can someone help me? My website is seoulsound.se

[Laza_Binaery]

Hi @Tilda_Falth

Try this in Customize theme > product page > Product Information section. Under Custom CSS add

.product-media-gallery__slideshow--single-media .product-media-constraint-wrapper {
    max-width: 1200px !important;
}
.product-media-gallery__slideshow--single-media .product-media {
    max-width: 1200px !important;
    max-height: 1200px !important;
}

That should override styles from base.css which are set to 470px.

[shopplaza_team]

Dear @Tilda_Falth

Could you please share the access link to your website? That way, I will be able to check and suggest the code to fix the issue.

Regards,
Eric from Shoppify

[devcoders]

Hi @Tilda_Falth

In your Shopify Admin go to online store > themes > actions > edit code
Find Asset > styles.css and paste this at the bottow of the file:

.product-media-container.constrain-height:has(.product-media-constraint-wrapper) {
  display: flex;
  justify-content: center;
  align-items: flex-start !important;
}

[tim_tairli]

I’d use this code:

.slideshow--single-media slideshow-slide {
  aspect-ratio: unset !important;
}

This specifically targets products with a single image.

Before/After:

→

---

The reason for behaviour you’re seeing is that you’ve limited the size of product images with the code below, but parent element is set to square aspect ratio which makes it taller than your limit. Then your image is vertically centred inside parent.

So you can also use this code, but it will leave empty space below image

.slideshow--single-media slideshow-slide {
  align-items: flex-start !important;
}

Your code to limit single image size:

/*Tilda kod för mindre product image*/
.product-media-gallery__slideshow--single-media .product-media-constraint-wrapper {
  max-width: 470px;
  margin: 0 auto;
}

.product-media-gallery__slideshow--single-media .product-media {
  max-width: 470px;
  max-height: 470px;
}