Multirow image distorting when switching to fullscreen

Multirow image distorting when switching to fullscreen

Cabell208
Visitor
3 0 0

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. 

Replies 5 (5)

NerdCurator
Shopify Partner
439 79 112

@Cabell208  Can you please provide the URL of your store and if it is password protected please share the password too. Thanks

Believes in delivering optimizing web solutions | Shopify Partner | Working as a web developer for last 10+ years.
- Was my reply helpful? Click Like to let me know! Coffee tips fuel my dedication.
- Was your question answered? Mark it as an Accepted Solution
Email me: info@nerdcurator.com
Cabell208
Visitor
3 0 0

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!

NerdCurator
Shopify Partner
439 79 112

@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;
}

  

Believes in delivering optimizing web solutions | Shopify Partner | Working as a web developer for last 10+ years.
- Was my reply helpful? Click Like to let me know! Coffee tips fuel my dedication.
- Was your question answered? Mark it as an Accepted Solution
Email me: info@nerdcurator.com
Cabell208
Visitor
3 0 0

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. 

NerdCurator
Shopify Partner
439 79 112

@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? 

Believes in delivering optimizing web solutions | Shopify Partner | Working as a web developer for last 10+ years.
- Was my reply helpful? Click Like to let me know! Coffee tips fuel my dedication.
- Was your question answered? Mark it as an Accepted Solution
Email me: info@nerdcurator.com