How can I resize my mobile banner for optimal viewing?

[ImaniManyfield1]

Hi, I am editing a store and I need help with resizing my mobile banner. On the computer it looks fine but when you view it in mobile version the words don't fit on the banner. 

[kazi]

Hello @ImaniManyfield1 Can you share the store URL? thanks

[ImaniManyfield1]

https://www.chetaraelements.com/

[kazi]

@ImaniManyfield1 do you mean top banner? 

[ImaniManyfield1]

No the banner that says handmade candles

[kazi]

@ImaniManyfield1 set the image as background remove all css from the text box and add padding top/bottom text align center

[ImaniManyfield1]

This theme doesn't allow me to do top padding. I have the image as background already

[kazi]

Its not set as background its as seperate block before the text

[ImaniManyfield1]

It doesn't give me a separate background option. Only where it says upload mobile image

[kazi]

remove the image block and css to the text block

.custom-block-banner.banner-large-img {
background-image: url(https://www.chetaraelements.com/cdn/shop/files/CHE_TARA_ELEMENTS_1370_x_600_px_691e443c-5d7e-4665-9a...);
padding: 323px 0px;
}

[ZenoPageBuilder]

Hello @ImaniManyfield1 👋

Inside Shopify Admin, you can go to Edit theme code, open file theme-styles.css and add this code at the bottom

@media (max-width: 767px) {
#block-1760decd-15b6-4ee2-940b-5265dbb920a1-largeImg-1 .adaptive_height {
    padding-top: 100% !important;
}
}

The result on mobile

Hope that helps! 

[ImaniManyfield1]

This didn't work