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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...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/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP

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/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP

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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Header/Image Banner squashed on mobile - Be Yours Theme

Header/Image Banner squashed on mobile - Be Yours Theme

Community Blog Articles