Increase height of my Product Image layout

[Ryanp]

I'm currently using two column layout for mobile and I would like to increase the size of the product image carousel on mobile only.. just a little taller.. 

Product page example - https://devildaves.com/products/dill-pickle-hot-sauce

[DaveedValencia]

Add this CSS and it will work. It will only effect mobile since desktop is greater than 150px.

.product-media-container.constrain-height .media{
min-height:150px;
}

[Ryanp]

Thanks. I need the width to change proportional to that. What can I add but still have the other images show a little so people know to swipe? 

[PageFly-Richard]

This is Richard from PageFly - Shopify Page Builder App

Hi  @Ryanp I saw Kate comment, also you can see the following information. I have checked with 2 column mobile screen when you increase the height then the width will not be able to increase to match the size. so the current height and width are balanced. Or if you want the image on mobile to be taller change the setup to 1 and a half column instead of 2 and a half column. then the image will display taller and wider.

Hope this can help you solve the issue

Best regards,
Richard | PageFly

[PageFly-Kate]

Hi @Ryanp, 

This is Kate from PageFly - Landing Page Builder App.

You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file -> Save

@media (max-width: 767px){
.product__media.media.media--transparent {
    height: 100px;
}}

Hope that my solution works for you.

Best regards,
Kate| PageFly

[GTLOfficial · Accepted solution]

Hello @Ryanp 
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> section-main-product.css ---> line number 526
search this code.

@media screen and (max-width: 749px) {
.product--mobile-columns .product__media-item {
width: calc(50% - 1.5rem - var(--grid-mobile-horizontal-spacing));
}
}

and replace with this code.

@media screen and (max-width: 749px) {
.product--mobile-columns .product__media-item {
width: calc(52% - 1.5rem - var(--grid-mobile-horizontal-spacing));
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[GTLOfficial]

Happy to help you...!!!
Thanks for Accepting my solution.
That would be great if you can buy me a pizza for my work in community.