How can I make list tags the same height without using pixels?

[collins276]

Hi,

I'd like to edit the container so they would have the same height (without using absolute unit such as px)

In the home page, I can set them of a same height by setting 'portrait' for images in theme editor but there is no option in Product page)

Please check my url https://189ee3-2.myshopify.com/products/vintage-jeans

Thank you guys.

[lunaworks]

I think you should just have the images to have the same dimensions and that should probably fix it. Checking the images , I noticed the first one has a higher height and width than the second image

[collins276]

That's why I set them the same width but have no idea to handle the height.

[lunaworks]

The width is not the same though, the first one is 720x560 and the second is 564x564

[PageFly-Noah · Accepted solution]

This is Noah from PageFly - Shopify Page Builder App

 Please add code here to set height image container:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

<style>
   @media screen and (mix-width: 768px){
   .product-media-container.constrain-height .media {
        padding-top: 50vh !important;
  
    }   
}

</style>

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

[collins276]

Thank you🙏😀

[PageFly-Noah]

Thank you ! have a nice day 😉