Craft Theme - Main Image on Home Paged is Too Large. I cannot find a way to reduce it.

NaturalNoble001 · ‎05-27-2024

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

ThePrimeWeb · ‎05-27-2024

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 "<head>" 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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

niraj_patel · ‎05-27-2024

Hello @NaturalNoble001
Can you share store url?

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

NaturalNoble001 · ‎05-27-2024

Hello, thank you. IT is www.dogbythehob.co.uk

ThePrimeWeb · ‎05-27-2024