Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Dawn Theme V12 - Automatically Resize The Banner When On Mobile So The Ends Are Not Cut Off

Solved

Dawn Theme V12 - Automatically Resize The Banner When On Mobile So The Ends Are Not Cut Off

wavefit
Tourist
15 0 2

Trying Automatically Resize The Banner When On Mobile So The Ends Are Not Cut Off - Using Dawn Theme V12

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
10262 2039 2110

This is an accepted solution.

Go to your Online store > Themes > Dawn > Edit code > open base.css and add this to the bottom of file and save and then check if it ok?

.banner__media img { object-fit: contain !important; }
@media screen and (max-width: 749px) {
.banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 22rem !important;
}
}

 

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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

Replies 9 (9)

Dan-From-Ryviu
Shopify Partner
10262 2039 2110

Hi @wavefit 

Could you drop your store link?

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.

wavefit
Tourist
15 0 2

Hi Dan,

 

I could though it is not published yet. I am currently migrating from debut theme to Dawn. 

Not sure if that changes anything?

 

Cheers

Dan-From-Ryviu
Shopify Partner
10262 2039 2110

Please give me your dawn them preview and password protected to view so I can provide the code make banner fit on mobile and desktop 

 

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.

wavefit
Tourist
15 0 2

https://wavefit.co.nz/?_ab=0&_fd=0&_sc=1

 

there is no password though

 

thanks

Dan-From-Ryviu
Shopify Partner
10262 2039 2110

Hi, @wavefit 

You must get share link from here. The link you provided still open in Debut theme

Screenshot 2023-11-03 at 08.23.40.png

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.

wavefit
Tourist
15 0 2
Dan-From-Ryviu
Shopify Partner
10262 2039 2110

This is an accepted solution.

Go to your Online store > Themes > Dawn > Edit code > open base.css and add this to the bottom of file and save and then check if it ok?

.banner__media img { object-fit: contain !important; }
@media screen and (max-width: 749px) {
.banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 22rem !important;
}
}

 

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.

wavefit
Tourist
15 0 2

Awesome!! You saved my day.

It works

 

Thanks a lot

Dan-From-Ryviu
Shopify Partner
10262 2039 2110

Happy I could help!

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.