On my product page, I have multirows with a few bullet points and pictures. However, when I switch my screen to full screen, the picture turns into a rectangle and cuts off part of the picture. I have also noticed that when I add more or less bullet points, it changes the size of the image. I want the image to be a square, or just simply show the full image.
Topic summary
A user is experiencing image distortion in a multirow section on their product page. When switching to fullscreen or adjusting the number of bullet points, images become rectangular and crop instead of maintaining their full square dimensions.
Troubleshooting Steps:
- Store URL was shared for diagnosis
- A CSS solution was proposed: adding
object-fit: contain;to themedia > imgselector in the base.css file - Initial implementation attempts failed, with the user trying various approaches including adding code to theme.liquid and custom CSS
Current Status:
The issue remains unresolved. The suggested CSS code has not been properly added to base.css according to the helper’s verification, and further implementation guidance is needed.
@Cabell208 Can you please provide the URL of your store and if it is password protected please share the password too. Thanks
https://uency1-e7.myshopify.com/
Does this work? I am new to this so please let me know if you can access my store through taht link. Thanks!
@Cabell208 You need to add this code in the theme files. For which you need to go to Online Store > Actions (Active theme) > Edit Code > Assets, under assets add the code at the bottom of base.css file.
media > img {
object-fit: contain;
}
It still didnt work. Ive tried adding codes to my base.css but haven’t had any luck. Ive had to had styles characteristics and add it to my theme.liquid. Ive even tried adding custom css for the specific code but hasn’t made a difference.
@Cabell208 I don’t see the code suggested in base.css, can you please add the code and let me know so I can check?