Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an 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!
This is an 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!
Hey @KAillustration
Kindly share your Store URL and Password if enabled
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.
This is an 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!
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,
This is an 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!
thank you! thats amazing!
hi, the code is visible at the bottom of my screen for some reason. Do you know how to hide it?
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
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024