Header/Image Banner squashed on mobile - Be Yours Theme

meld78 · ‎01-04-2024

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/

Dan-From-Ryviu · ‎01-04-2024

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

<style>
@media (max-width: 749px) {
.banner {
height: 39rem;
}
.banner__media .media--adapt {
padding-bottom: 100%;
}
}
</style>

- Helpful? Like and Accept solution!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

websensepro · ‎01-04-2024

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!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial

meld78 · ‎01-04-2024

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?

websensepro · ‎01-04-2024

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

}

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial

Dan-From-Ryviu · ‎01-04-2024

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

<style>
@media (max-width: 749px) {
.banner {
height: 39rem;
}
.banner__media .media--adapt {
padding-bottom: 100%;
}
}
</style>

- Helpful? Like and Accept solution!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

meld78 · ‎01-04-2024

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

Dan-From-Ryviu · ‎01-04-2024

Happy I could help

- Helpful? Like and Accept solution!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Header/Image Banner squashed on mobile - Be Yours Theme

Header/Image Banner squashed on mobile - Be Yours Theme

Community Blog Articles