Hi, my banner image crops on mobile and I looked most of the discussions and tried various css codes in them but none of them worked out. My site is gamaderma.com can anyone help me please?
Hey @knrys
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
1 Like
Thank you it worked but now there is grey spaces in top and bottom. Can I make it that only the banner looks in full resolution without spaces
Hey @knrys
You could try updating the css with the following code.
@media screen and (max-width: 749px) {
.banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 15rem;
}
.banner__media.media.scroll-trigger.animate--fade-in img {
object-fit:contain;
}
}
Updating the min height that is set should remove the grey space above and below the image
1 Like
I added this to theme.liquid but it didn’t work. Sorry I do not understand coding where should I exactly paste this?
I couldn’t find dm but filled the form in your website.