Header/Image Banner squashed on mobile - Be Yours Theme

[meld78]

Hi there,

I just updated the image on my homepage and now it’s squashing or not displaying the header (logo) correctly.

I have no idea how to fix it.

Could someone please assist?

https://www.merindahbotanicals.com.au/

[websensepro]

Hi, @meld78 .

Follow These steps,

Go to the online store theme and go to base.css file paste the code mentiond below.

.banner__content {
    position: relative;
}

.header__heading-logo {
    width: 100%;
}

.banner__content.banner__content--middle-center.page-width {
    background: #edcfb5;
}

.banner__box {
    padding: 40px 30px;
}

Result:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

[meld78]

thank you. Just tried this but it completely removed the image and also, I’d like the text on the image, not below. Is there a way to do that?

[Dan-From-Ryviu]

Go to your Online store > Themes > Edit code > open theme.liquid file, add this code below under element

[meld78]

Amazing, thank you so much @Dan-From-Ryviu

[Dan-From-Ryviu]

Happy I could help

[websensepro]

sorry Add these media query codes.

@media (min-width: 320px) and (max-width: 767px) {

.banner__content {
    position: relative;
}

.header__heading-logo {
    width: 100%;
}

.banner__content.banner__content--middle-center.page-width {
    background: #edcfb5;
}

.banner__box {
    padding: 40px 30px;
}

}