How can I fit a banner image correctly on mobile devices?

[Furabiojp]

I have looked around and tried adding

@media (max-width: 767px) { .image__overlay-section.section-template--14620851241063__a4022d85-3f7b-4535-b438-400d1eef8043 { --height: 200px !important; margin-bottom: -200px; } }

but it didn’t work. Any other ideas on how I can ensure the banner image is displayed correctly on mobile devices?

https://boo4dow.myshopify.com/

Thanks in advance!

[Dan-From-Ryviu]

Hi @Furabiojp

Please use this code instead

The result:

[EBOOST]

Hi @Furabiojp ,

Maybe I suggest code below:

@media(max-width: 749px){
    #Banner-template--19276810453331__image_banner {
        flex-flow: column;
    }
    #Banner-template--19276810453331__image_banner .banner__media  {
        position: relative;
    }
    #Banner-template--19276810453331__image_banner .banner__media  img {
        position: static;
    }
    #Banner-template--19276810453331__image_banner .banner__content {
        position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      min-height: inherit;
      border: 1px solid red;
      z-index: 3;
    }
}

[ZenoPageBuilder]

Hello @Furabiojp

You can use this code instead

@media (max-width: 749px) {
    .banner__content {
        min-height: 20rem !important;
    }
}

The result on mobile

Hope it helps!

[Furabiojp]

It worked like a charm! Thanks a lot!