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
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
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.