Solved

Banner Sizes Mobile/Desktop dawn Theme

PatriceDianakay
Tourist
5 0 1

I have the Dawn theme for my store. I have a banner up. It shows fine on the desktop but on mobile the sides of the banner are cut off. How do i fix this so that mobile shows the full banner?

 

PatriceDianakay_0-1698844983714.png

PatriceDianakay_1-1698845299603.png

 

 

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
7532 1454 1450

This is an accepted solution.

Please go to your Online store > Themes > Edit code > open base.css file, and add this code at the bottom. 

 

@media (max-width: 767px) {
.banner__media {
    height: fit-content !important;
}
.banner__media img {
    position: relative !important;
    object-fit: contain !important;
    object-position: center center !important;
}
}

 

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 11 (11)

Moeed
Shopify Partner
3695 932 1165

Hey @PatriceDianakay 

 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
PatriceDianakay
Tourist
5 0 1

websensepro
Shopify Partner
1014 139 147

Hi, @PatriceDianakay.

 

You can follow these steps:

Go to Online Store -> Themes -> Edit code.

Go to Assets folder -> Base.css  file.

Add the following code at the bottom of the file.

 

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

.banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media {
    height: 19rem;
}

}

 

Result:

websensepro_0-1698892409028.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
PatriceDianakay
Tourist
5 0 1

Still cut off when i do it. Not sure what I'm doing wrong

 

PatriceDianakay_0-1698849611024.png

 

websensepro
Shopify Partner
1014 139 147

add !important tag in the code .

 

Like These and and let me know it's working and not.

 

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

.banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media {
    height: 19rem !important;
}

}
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
7532 1454 1450

Hi @PatriceDianakay 

Your store link please

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

PatriceDianakay
Tourist
5 0 1
Dan-From-Ryviu
Shopify Partner
7532 1454 1450

This is an accepted solution.

Please go to your Online store > Themes > Edit code > open base.css file, and add this code at the bottom. 

 

@media (max-width: 767px) {
.banner__media {
    height: fit-content !important;
}
.banner__media img {
    position: relative !important;
    object-fit: contain !important;
    object-position: center center !important;
}
}

 

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

PatriceDianakay
Tourist
5 0 1

Thank you!!! You are a life saver!

Dan-From-Ryviu
Shopify Partner
7532 1454 1450

Happy I could help!

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Dan-From-Ryviu
Shopify Partner
7532 1454 1450

Please go to your Online store > Themes > Edit code > open base.css file, add this code at the bottom 

@media (max-width: 767px) {
.banner__media {
    height: fit-content !important;
}
.banner__media img {
    position: relative !important;
    object-fit: contain !important;
    object-position: center center !important;
}
}

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now