How to fix banner size issues on mobile with the Dawn theme?

[PatriceDianakay]

I have the Dawn theme for my store. I have a banner up. It shows fine on the desktop but on mobile the sides of the banner are cut off. How do i fix this so that mobile shows the full banner?

[Moeed]

Hey @PatriceDianakay 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

[PatriceDianakay]

www.chiquebypatrice.com

nipeal

[websensepro]

Hi, @PatriceDianakay.

You can follow these steps:

Go to Online Store -> Themes -> Edit code.

Go to Assets folder -> Base.css  file.

Add the following code at the bottom of the file.

@media (min-width: 320px) and (max-width: 767px) {

.banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media {
    height: 19rem;
}

}

Result:

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

[PatriceDianakay]

Still cut off when i do it. Not sure what I'm doing wrong

[websensepro]

add !important tag in the code .

Like These and and let me know it's working and not.

@media (min-width: 320px) and (max-width: 767px) {

.banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media {
    height: 19rem !important;
}

}

[Dan-From-Ryviu]

Hi @PatriceDianakay 

Your store link please

[PatriceDianakay]

www.chiquebypatrice.com

[Dan-From-Ryviu · Accepted solution]

Please go to your Online store > Themes > Edit code > open base.css file, and add this code at the bottom. 

@media (max-width: 767px) {
.banner__media {
    height: fit-content !important;
}
.banner__media img {
    position: relative !important;
    object-fit: contain !important;
    object-position: center center !important;
}
}

[PatriceDianakay]

Thank you!!! You are a life saver!

[Dan-From-Ryviu]

Happy I could help!

[Dan-From-Ryviu]

Please go to your Online store > Themes > Edit code > open base.css file, add this code at the bottom 

@media (max-width: 767px) {
.banner__media {
    height: fit-content !important;
}
.banner__media img {
    position: relative !important;
    object-fit: contain !important;
    object-position: center center !important;
}
}