Hi, we have uploaded some images onto our website, which is using the Craft Theme. However, the main image is too bog on the desktop version (however it is perfect on the mobile version). Essentially, the outer areas of the image are being cut off, when the site is viewed on desktop/laptop. See attached image.
I have tried resizing the image various times but this makes no difference. Looking at the threads, it may be that I need to do something with the CSS code but I am at a loss as to where, what and how.
Could anybody kindly advise on what can be done to make the image appear properly please? Thanks, G
Hello @NaturalNoble001
Can you share store url?
Hello, thank you. IT is www.dogbythehob.co.uk
Hey @NaturalNoble001 ,
If you bring in the outer sides of the image, it will leave some gaps as such
If you’re ok with that then follow the instructions below.
Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.
@media only screen and (min-width: 990px) {
#shopify-section-template--21069493731654__collage-0 .product-card-wrapper > .media > img {
object-fit: contain !important;
}
}
Screenshot is for reference only, the correct code to paste is the one shown above.
1 Like
