How to resize collection header images for mobile only

[KAillustration]

Hi, can anyone help me? I have my collection header images set to medium and on my desktop site they look great. However they are too close up on the mobile version. Is it possible to change just the size of the mobile version? I would like the image to fit the width of the screen.

Thanks,

Kat

[websensepro · Accepted solution]

Hi, @KAillustration.

You can try this code: it will be helpful to you

Go to the online store theme and go to base.css file paste the code mentiond below.

@media (max-width: 767px) {

.animate--fixed>img:not(.zoom):not(.deferred-media__poster-button) {
    height: 60vh;
    margin-top: 0px;
    position: relative
}

}

Result:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

[Moeed]

Hey @KAillustration 
Kindly share your Store URL and Password if enabled

[KAillustration]

Hi, its https://kats-illustration.myshopify.com/ 

giempi

[Moeed]

Hey @KAillustration 
Can you please show a screenshot of what you're referring to?

[KAillustration]

The top one ( desktop) is good but the bottom one (mobile) is too close up you cant see the products

[KAillustration]

On my desktop site they look great. However they are too close up on the mobile version. Is it possible to change just the size of the mobile version? I would like the image to fit the width of the screen.

[websensepro · Accepted solution]

Hi, @KAillustration.

You can try this code: it will be helpful to you

Go to the online store theme and go to base.css file paste the code mentiond below.

@media (max-width: 767px) {

.animate--fixed>img:not(.zoom):not(.deferred-media__poster-button) {
    height: 60vh;
    margin-top: 0px;
    position: relative
}

}

Result:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

[KAillustration]

Thank you!!! that is perfect

[KAillustration]

It is great on mobile but has now edited the desktop image as well. It has created a greyed out area on the image. Do you have a solution for removing that?

[websensepro]

please send me your css file screenshot,

[KAillustration]

[websensepro · Accepted solution]

your are add media querry,

@media (max-width: 767px) {

.animate--fixed>img:not(.zoom):not(.deferred-media__poster-button) {
    height: 60vh;
    margin-top: 0px;
    position: relative
}

}

Like This:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

[KAillustration]

thank you! thats amazing!

[KAillustration]

hi, the code is visible at the bottom of my screen for some reason. Do you know how to hide it? 

[KAillustration]

I have managed to fix this

[KAillustration]

Is there a way to edit this code so it doesn't override the animation setting? I have it set to 'fixed background position" but that is no longer working since adding this code