How can I fit a banner image for mobile with centered text?

[KindWordsCards]

Hello I’ve searched for css coding online but no prevail. I would like to fit the banner image for mobile for the text image in the center to fit the entire screen?

Thanks

[Dan-From-Ryviu]

Hi @KindWordsCards

You store link please

[KindWordsCards]

www.kindwordscards.com

Thank you!

[Dan-From-Ryviu]

Hi @KindWordsCards

Go to your Online store > Themes > Customize > select Slideshow section and then add those code in Custom CSS of that section

@media (max-width: 767px){
.slideshow__media { height: fit-content !important; }
.slideshow__media img { object-fit: contain !important; }
.banner--mobile-bottom .slideshow__text.banner__box { display: none !important; }
}

[KindWordsCards]

Looks like it removed the images when I did it. Its showing up that way on the preview and also when I actually use my phone to visit the site.

[Dan-From-Ryviu]

Hi @KindWordsCards

Please update code to this

@media (max-width: 767px){
.slideshow__media { height: 22rem !important; }
.slideshow__media img { object-fit: contain !important; }
.banner--mobile-bottom .slideshow__text.banner__box { display: none !important; }
}

[KindWordsCards]

Thank you so much! It worked!

[Dan-From-Ryviu]

Very nice to hear from you. Have a great weekend

[KindWordsCards]

You as well. Thanks again!