How to optimize product images for both desktop and mobile on Debutify?

Store Design
1

Hi Guys,

I´m having problems making my products’ images look good either on desktop and mobile. I have tried all the options on settings but if I make the images perfect for mobile they cut off for desktop. Any clue of how to make them look good in both?

URL: https://ilondon.shop

Password: kamilla

Thank you!

2

@Kleber_shaw

please Go to Online Store->Theme->Edit code then go to assets/theme.scss.liquid ->paste below code at the bottom of the file.

.bgset {
    background-size: contain !important;
}
3

Hello There,

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

.bgset {
background-size: contain !important;
}
4

** @dmwwebartisan @ZestardTech **Thank you for your reply. That worked well for the product images on both mobile and dektop but created a big gap on my banner on home page. Any clue how to take that out? Thank you

Pascreen.png
Pascreen.png1560×1040 185 KB

5

@Kleber_shaw

Please remove previous css and add this new css

#FeaturedCollections-1623951828383afe5b .bgset {
    background-size: contain!important;
}
6

@Kleber_shaw

Css for bottom of home page section

@media screen and (min-width:770px){
#section-162609706986702857 .collection_grid--medium {
    min-height: 317px;
}
}

#section-162609706986702857 .bgset {
    background-size: contain!important;
}
7

@dmwwebartisan Thats much better but that banner still cutting of on the top. Is there any way to make ir full width? Thanks

pscreem.png
pscreem.png1560×1040 216 KB

8

@Kleber_shaw

Try this css

@media screen and (min-width: 769.1px){
.hero--large {min-height: 875px !important;}
}
9

@dmwwebartisan You are a legend! Thank you very much!