How do I make the model images for all my products focus on the top so that it shows their head completely and a little space above. Right now, it’s focused on the middle. Thanks. My URL is www.whosociety.com
Topic summary
A user seeks to adjust product image positioning on their Shopify store (whosociety.com) so model photos display heads completely with space above, rather than centering on the middle of the image.
Proposed Solutions:
- First attempt: Add CSS code to base.css targeting
.product-media-container.constrain-height .mediawithpadding-top: none !important;— this solution did not work for the original poster. - Second attempt: Add different CSS code to base.css using
img.image-magnify-lightbox { object-fit: contain; }to change the image fitting behavior.
Current Status:
The discussion remains open. The user confirmed the first solution failed, but has not yet reported whether the second CSS approach resolved the issue. Both solutions involve editing the base.css file in the theme’s code editor.
1 Like
Please paste this code in the end of base.css file.
.product-media-container.constrain-height .media{
padding-top: none !important;
}
Results;
This didn’t work for me. Nothing changed
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
img.image-magnify-lightbox {
object-fit: contain;
}
Result
Best,
DaisyVo