Header/Image Banner squashed on mobile - Be Yours Theme

Technical Q&A

Topic summary

A user reported that after updating their homepage image, the header logo was displaying incorrectly or appearing squashed on mobile devices in the Be Yours theme.

Initial Solution Attempts:

  • One responder suggested adding CSS code to the base.css file targeting .banner__content and .header__heading-logo elements
  • This solution completely removed the image and didn’t resolve the text positioning issue

Working Solution:
Another contributor provided CSS code to be added to the theme.liquid file within the <head> element, which successfully fixed the mobile display issue.

Follow-up:
The original responder corrected their solution by providing a media query specifically targeting mobile devices (320px-767px width) with adjusted CSS for the banner content, padding, and background properties.

Status: Resolved - the user confirmed the second solution worked correctly.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

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/

meld78_0-1704348814252.png
meld78_0-1704348814252.png507×411 156 KB

2

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:

websensepro_0-1704439388966.png
websensepro_0-1704439388966.png321×519 112 KB

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

3

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?

4

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

Screenshot 2024-01-04 at 15.01.36.png
Screenshot 2024-01-04 at 15.01.36.png468×556 186 KB

1 Like
5

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

1 Like
6

Happy I could help

7

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;
}

}