Solved

Header/Image Banner squashed on mobile - Be Yours Theme

meld78
Shopify Partner
48 0 7

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

 

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
7006 1323 1349

This is an accepted solution.

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>

Screenshot 2024-01-04 at 15.01.36.png

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 6 (6)

websensepro
Shopify Partner
873 117 126

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

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
meld78
Shopify Partner
48 0 7

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
Shopify Partner
873 117 126

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

Dan-From-Ryviu
Shopify Partner
7006 1323 1349

This is an accepted solution.

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>

Screenshot 2024-01-04 at 15.01.36.png

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

meld78
Shopify Partner
48 0 7

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

Dan-From-Ryviu
Shopify Partner
7006 1323 1349

Happy I could help

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now