Solved

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

NaturalNoble001
Tourist
3 0 0

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

NaturalNoble001_0-1716807408443.png

 

 

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
2138 614 487

This is an accepted solution.

Hey @NaturalNoble001,

 

If you bring in the outer sides of the image, it will leave some gaps as such

ThePrimeWeb_0-1716815760810.png

 

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.

ThePrimeWeb_1-1716815799831.jpeg

 

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

Replies 3 (3)

techlyser_web
Shopify Partner
1611 299 322

Hello @NaturalNoble001 
Can you share store url?

Techlyser || 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
Tourist
3 0 0

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

ThePrimeWeb
Shopify Partner
2138 614 487

This is an accepted solution.

Hey @NaturalNoble001,

 

If you bring in the outer sides of the image, it will leave some gaps as such

ThePrimeWeb_0-1716815760810.png

 

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.

ThePrimeWeb_1-1716815799831.jpeg

 

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!