Image cropping of images

Store Design
, ,
1

Hello,

I am having an issue where the top of my product images are being cut off when I add them to my main page.

Please see the attached picture, the models are missing their heads.

How can I solve this? I have ticked the option to fit the whole image but then this extends the section, making it too long.

I am using the Prestige theme. Please see the URL - mutu-store

Many thanks, Josh

jking403_0-1736729180636.png
jking403_0-1736729180636.png1918×755 208 KB

2

Hi @jking403

You can solve it by adding this code to Custom CSS of that section in Online Store > Themes > Customize

.content-over-media--md {
    --content-over-media-height: clamp(100%, 100vw, 36rem);
}

Screenshot 2025-01-13 at 10.08.55.png
Screenshot 2025-01-13 at 10.08.55.png3440×2444 933 KB

1 Like
3

Hi @jking403 ,

I am from Mageplaza - Shopify solution expert.

You can achieve your requirement by add custom CSS rules:

  1. Go to the Shopify Admin Panel
  • Log in to your Shopify admin dashboard.
  • Navigate to Online Store > Themes > Click Theme Settings > Expand Custom CSS.
  1. Add custom CSS:
.content-over-media img {
    object-fit: contain;
    height: 100%;
}
  1. Save changes and test

Please leave a comment if it functions as you expected. :slightly_smiling_face:

1 Like
4

Hello @jking403
Go to online store ----> themes ----> actions ----> edit code ---->theme.css
add this code at the end of the file and save.

.content-over-media--md {
--content-over-media-height: clamp(25rem, 100vw, 66rem) !important;
}

Thanks

1 Like