Resizing images to fit mobile view

3 0 1

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.

Thank you CJ

52 13 12

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

Did my answer work for you? Please drop a Like and Mark it as Accepted.
If you need further help or want to get something custom built for your Shopify store, then feel free to mail our team on
Happy to help.
3 0 1

THANK YOU SO MUCH!! that worked