How can I resize my homepage image (main) banner for mobile view?

[Patwalters]

Hello, I hope everyone is doing well! Currently, I love how the main image banner, on my homepage, looks on the desktop screen, however, on mobile screens it isn't width enough so you can't see the end sides  (right and left) of the image. I'll appreciate any suggestion on how to fix this issue. Thanks in advance! 

Url: https://legacymacramestudio.com/

[Asad-Mahmood · Accepted solution]

Go to your online store -> customize -> settings -> custom css and paste this code there 

@media screen and (max-width: 749px) {
    .banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
        min-height: 16rem !important;
    }
div.slideshow__media.banner__media.media img {
    height: auto !important;
    object-fit: contain;
}
}

[Patwalters]

Thank you so much! It worked! 

[Asad-Mahmood]

Glad it worked for you

[BSSCommerce-B2B]

Hi @Patwalters , 

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

@media screen and (max-width: 749px) {
    .slideshow__media.banner__media.media img {
        object-fit: contain !important;
        height: auto !important;
    }
    .banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
        min-height: 19rem !important;
    }
}

Step 3: Save your code and reload this page.

=>> The result: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!