Debut theme image sizes too large on desktop.

[Catchin]

Hi all,

I have just launched my website and I have noticed that when in desktop mode the images blow up too large and become blurry but in mobile view it looks perfect. 

I am using the debut theme. If anyone could give me a hand or point me in the right direction to resolve this issue that would be awsome!

Website: www.catchinsnags.co.nz

Thanks.

[diego_ezfy · Accepted solution]

@Catchin, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:

@media (min-width: 767px){

    #shopify-section-hero-1{
        margin-top: 0 !important;
    }
    [id] .hero{
    max-width: 1000px !important;
    margin: auto auto !important;
    height: auto !important;

}


[id*='#shopify-section-hero'] *,
[id] .hero *{
        background-size: contain !important;
        height: auto !important;
}

}

You can modify the width by altering the value 1000px. This code will be applied exclusively to desktop devices.
Because these images are being rendered as CSS backgrounds, customization is a bit more limiting but I hope it helps you out. 

This custom section can also be a potential solution for your use case.

Kind regards,
Diego

[Catchin]

Thanks so much for your help! Case solved!

[tctc2021]

Hello!

Can you help us with a similar issue? The image I am using for our collection description is appearing too large on the mobile version. The URL is below;

https://www.theclosettradingco.com/collections/tctc-x-cancer-cartel

Thank you so much!