How can I fix a cut-off banner on my mobile page?

Store Design
1

Hi everyone,

My name is Perla. I am new to shopify and I have been having trouble with my online store. On a desktop, my banner looks perfect; however, on my mobile phone the banner is cut off. I was wondering if anyone would be so kind as to help me out. I have tried to resize the banner but shopify does not allow me to use other sizes. My shop is www.spanishmed.net

Thank you very much for helping all of us troubleshoot.

Kind regards,
Perla A.

2

Hi @Perla178 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/section-image-banner.css->paste below code at the bottom of the file:
@media (max-width: 749px) {
     .banner--large.banner--mobile-bottom:not(.banner--adapt) .banner__media {
        height: auto !important;
        padding-bottom: 57%;
    }
    .banner--large.banner--mobile-bottom:not(.banner--adapt) .banner__media img {
        object-fit: contain;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.