Solved

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

collins276
Trailblazer
213 1 32

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.

 

Screenshot (2).png

 

Accepted Solution (1)

PageFly-Noah
Shopify Partner
1283 227 260

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 6 (6)

lunaworks
Shopify Partner
449 44 47

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

If my solution fixed your issue, please mark my solution as solved.
In need of custom solutions? Please DM.
collins276
Trailblazer
213 1 32

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

lunaworks
Shopify Partner
449 44 47

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

If my solution fixed your issue, please mark my solution as solved.
In need of custom solutions? Please DM.

PageFly-Noah
Shopify Partner
1283 227 260

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

collins276
Trailblazer
213 1 32

Thank you🙏😀

PageFly-Noah
Shopify Partner
1283 227 260

Thank you ! have a nice day 😉

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.