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
Hey @KAillustration
Kindly share your Store URL and Password if enabled
Hi, its https://kats-illustration.myshopify.com/
giempi
Hey @KAillustration
Can you please show a screenshot of what you’re referring to?
The top one ( desktop) is good but the bottom one (mobile) is too close up you cant see the products
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.
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!
Thank you!!! that is perfect
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?
please send me your css file screenshot,
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!
thank you! thats amazing!
I have managed to fix this
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
