Debut theme image sizes too large on desktop.

Solved
Catchin
New Member
2 0 0

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.

0 Likes

This is an 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

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
Catchin
New Member
2 0 0

Thanks so much for your help! Case solved!

0 Likes