Mobile banner crops on dawn theme

[knrys]

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?

[comercioservice · Accepted solution]

@knrys please add this code also 

.banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 15rem;
}

let me know 

[Moeed]

Hey @knrys 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.banner__media.media.scroll-trigger.animate--fade-in img {
    object-fit: contain !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[comercioservice]

@knrys 

hi Hope you are well,

I’ve taken a look at what you need—just a little CSS magic, and everything will be fixed! Follow my steps, and you'll have it sorted in no time!

1, from admin, go to Online Store > Themes.

2, Actions > Edit code for your active theme.

3, Find and open the theme.liquid file, maybe in the Layout folder.

4, Look for the </head> tag and paste the code in the end

<style>

@media only screen and (max-width: 767px) {
 .banner__media.media.scroll-trigger.animate--fade-in img {
    object-fit: contain;
}
}
</style>
​

I hope it works for you, let me know, and If you'd like to discuss this more, don't hesitate to send me a PM

Thank you

[knrys]

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

[comercioservice · Accepted solution]

@knrys please add this code also 

.banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 15rem;
}

let me know 

[comercioservice]

@knrys 

if is it hard for you I can send you a staff account request then I can help you, please dm me 

[knrys]

I couldn't find dm but filled the form in your website.

[comercioservice · Accepted solution]

@knrys  here is the steps 
1, https://prnt.sc/5i6qGO96Ubqe
2, https://prnt.sc/FJ0HK_5ENIK2

[polishedCode]

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

 

[knrys]

I added this to theme.liquid but it didn't work. Sorry I do not understand coding where should I exactly paste this?