How can I reduce the size of my product images for mobile

[CameronO]

Hi, I want to reduce the size of my product images as they take too much space on mobile and push the add to cart button further down as a result. How do I do this? Thanks.

[BSS-TekLabs · Accepted solution]

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you @CameronO .

[Bundler-Manuel]

Hello @CameronO i think it would be helpful for you to share your store url link so it can be properly viewed and a solution can be given according to the theme you’re currently using.

[CameronO]

liminol.com

[BSS-TekLabs]

- Here is the solution for you @CameronO 
- Please follow these steps:

- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

 

<style>
@media only screen and (max-width: 600px) {
.product-media-container.constrain-height .media {
    padding-top: 300px !important;
}
.media>*:not(.zoom):not(.deferred-media__poster-button), .media model-viewer {
    height: 300px !important;
}
}
</style>

[BSS-TekLabs · Accepted solution]

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you @CameronO .

[BSS-TekLabs · Accepted solution]

if you want like that. Can you try this code @CameronO 

<style>
@media only screen and (max-width: 600px) {
.product-media-container.constrain-height .media {
    padding-top: 300px !important;
}
.media>*:not(.zoom):not(.deferred-media__poster-button), .media model-viewer {
    height: 300px !important;
object-fit: fill !important;
}
}
</style>