Solved

Second image on hover - make the image fit to container

kport
Excursionist
36 0 8

Hello there,

 

I'm using Studio 13.0.1.

 

Second image on hover works well but the second image is cut off on the side.

How can I make the second image fit to container?

 

Below, you can see the image in the middle is the second image we see on hover and it doesn't fit the photo thumbnail.

 

 

kport_0-1712797612820.png

 

Many thanks in advance!

 

 

 

Accepted Solution (1)

PageFly-Oliver
Shopify Partner
878 190 174

This is an accepted solution.

Hi @kport ,

 

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

 

<style>
.card-wrapper img{
object-fit: contain !important;
}
</style>

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 2 (2)

PageFly-Oliver
Shopify Partner
878 190 174

This is an accepted solution.

Hi @kport ,

 

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

 

<style>
.card-wrapper img{
object-fit: contain !important;
}
</style>

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

kport
Excursionist
36 0 8

Hello Oliver,

 

Perfect!

Thank you so much for your quick and clear help!