Adjusting desktop collection image to fit mobile screen automatically.

[nostalgiaLTD]

I am using the DEBUT theme. I am trying to get the desktop default collection photo to fit/display correctly automatically on the mobile version of my site. I have tried other solutions for this problem, but cant get them to work.

The link to the page is https://nostalgia.ltd/collections/vintage-rap-t-shirt

Any help is SO much appreciated.

Best.

[KetanKumar]

Hello, @nostalgiaLTD 

Thanks 

can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 749px) {
.collection-hero__image {
    height: auto;
    background-size: contain;
}
}

[daliasabet]

thank you! it worked

[KetanKumar]

@daliasabet 

thanks for update 

it's my pleasure to help us

[SplashedByPinkz]

Hello can you help me adjust my Shopify desktop theme to fit mobile view as well?

[KetanKumar]

@SplashedByPinkz 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[SplashedByPinkz]

https://splashedbypinkz.com
password Pinkz

[KetanKumar]

@SplashedByPinkz 

yes please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

@media only screen and (max-width: 749px) {
#shopify-section-hero-1 .hero--large {
    height: 190px;
}
}

[SplashedByPinkz]

Wait so it only work 5secs 

[SplashedByPinkz]

it worked for the top image not the bottom

[KetanKumar]

@SplashedByPinkz 

yes please try this code

@media only screen and (max-width: 749px) {
#shopify-section-hero-2 .hero--large {
    height: 200px;
}
}

[SplashedByPinkz]

thank you so muchhhhh

[KetanKumar]

@SplashedByPinkz 

it my pleasure to help us

[fivethreesupply]

Can you do my site as well? 

[SHOPGRACE]

Hello @KetanKumar, 

Can you please assist me. I can't seem to figure it out. 

www.shopgrace-boutique.com

password: ShopGrace

The image says *Fee Bottle on Orders Over $65. 

Thank you!

[KetanKumar]

@SHOPGRACE 

possible this look at mobile please confirm 

[SHOPGRACE]

@KetanKumar 

Yes that is the image I'm having trouble with. I see that in the mobile version it might not look good. 

What do yo recommend? 

Should I just paste that code to make it look the way you made it or is there another solution? 

[KetanKumar]

@SHOPGRACE 

yes please change image size 

[VicR]

I’m in need of some help as well. Unable to get the collection images to resize automatically in mobile view. Here is a link to one of the images on mobile view. https://1982candleco.com/collections/the-midnight-collection