How do decrease height of the image banner text box only on mobile

[lukafernada]

How do I decrease of the text box here:

My URL is cheffings.net

[TikitaTech]

Hi @lukafernada!

You can decrease the size of the box by going to Admin > Edit Code > section-image-banner.css: (line 335)

Adding padding: 4rem 3.5rem; under `.banner:not...` class allows you to decrease the size from 4rem of padding and make the box's height smaller for mobile only:

@media screen and (max-width: 749px) {
  .banner--mobile-bottom:not(.banner--stacked) .banner__content {
    order: 2;
  }

  .banner:not(.banner--mobile-bottom) .field__input,
  .banner--mobile-bottom:not(.banner--stacked) .banner__box.color-background-1 {
    background: transparent;
    padding: 4rem 3.5rem;
  }
}

As an example, changing the padding to 2rem 3.5rem will give you:

Hope this helps!

[BSSCommerce-B2B]

@lukafernada,

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </body>

<style>
@media screen and (max-width: 767px) {
    #shopify-section-template--20694435627357__image_banner_ELBDKx #Banner-template--20694435627357__image_banner_ELBDKx h2.banner__heading.inline-richtext {
        font-size: 29px !important;
        font-weight: bold!important;
    }
}
</style>

Result:

If it helps you, please like and mark it as the solution.

Best Regards 😊