How to prevent hero image from cutting off on mobile view?

Store Design
1

Hello!

Just hoping to get some assistance when viewing my homepage on a mobile device. The hero image that I have looks perfect on desktop but it cuts off when viewed on a mobile. How can I prevent this? Thank you!

Website is: www.fightonboxing.com.au

2

@LukeSmith1

@media screen and (max-width: 500px){
.banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 15rem;
}
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

3

@LukeSmith1

@media screen and (max-width: 749px){
.banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 16rem !important;
}
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->section-image-banner.css

4

Thank you so much!

5

@LukeSmith1
if helpful kindly like our Solution.