How can I resize images for optimal mobile view?

[caleeji]

so my featured collection photos on my homepage of my website looks great on desktop and fits perfectly but when i go to view it on mobile view, it cuts out the whole image and it does not give me and option to resize it to fit so you can see the whole image on mobile view please help. This is my website to view it.

https://lumoxe.com/

Thank you CJ

[WinkyApps · Accepted solution]

Hi @caleeji 

Welcome to Shopify community and thanks for posting this question. 

Please use this below code at the bottom of your Settings > Online Store > Themes > Action > Edit Code

In the Assets folder look for theme.scss.liquid. Add this below code at the bottom of the file.

@media only screen and (max-width: 749px) {
    .collection_grid-item {
        background-size: contain;
        background-repeat: no-repeat;
        padding-top: 100%;
    }
}

Try and let me know if that works. Hope this helps.

[caleeji]

THANK YOU SO MUCH!! that worked 🙂

[Moe3815]

Hello! I am having the same issue regarding resizing for mobile. My Image banners do not resize in mobile.

My site is here: kaylawiththecurls.com

I pasted this at the bottom, but I'm sure I did something wrong.

@media only screen and (max-width: 749px) {
.collection_grid-item {
background-size: contain;
background-repeat: no-repeat;
padding-top: 100%;
}
}

[WML]

Hey @WinkyApps,

I noticed you replied and helped someone with resizing there image to fit both mobile and desktop, I'd like to do this to my website but it seems the asset "theme.scss.liquid" isn't there for me.

Help would be appreciated,

Thanks.

[AshanteSimonee]

I'm having the same issue too & I can't find that code either .. did you ever get help? 

[catrosa8252]

I don't have the "theme.scss.liquid." option. Has this moved somewhere else?

[Muko]

I need help with this too. I don't have a theme.scss.liquid???? Does anybody know how to fix it?