Dawn Theme- Resizing banner image To Fit Mobile Screen

skinnystick · ‎11-28-2023

Hi, I would like to change the size of my banner on the mobile version to something like this:

my page url: https://skinnyartspace.com/

Dan-From-Ryviu · ‎11-28-2023

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

<style>
@media (max-width: 767px) {
#Banner-template--21681505534263__4d405492-4f5f-4a7e-a390-bff21aa89d56 .banner__media {
height: 55rem;
}
}
</style>

- 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

Dan-From-Ryviu · ‎11-29-2023

Hi @skinnystick

Please update code and check again

<style>
@media (max-width: 767px) {
#Banner-template--21681505534263__4d405492-4f5f-4a7e-a390-bff21aa89d56 .banner__media {
height: 71rem !important;
}
#Banner-template--21681505534263__4d405492-4f5f-4a7e-a390-bff21aa89d56 .banner__content { min-height: 70rem !important;  }
}
</style>

- 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

websensepro · ‎11-28-2023

Go to Online Store
2) Edit Code
3) Find base.css file

4) Add the following code in the bottom of the file

@media only screen and (max-width: 600px) {
.banner__media.media.banner__media-half {
    height: 50rem !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

Free Shopify Beginner Tutorial

Dan-From-Ryviu · ‎11-28-2023

Hi @skinnystick

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

<style>
@media (max-width: 767px) {
#Banner-template--21681505534263__4d405492-4f5f-4a7e-a390-bff21aa89d56 .banner__media {
height: 55rem;
}
}
</style>

- 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.

skinnystick · ‎11-29-2023

Thank you. Is there a way to make the word shift to the centre of the page?

Dan-From-Ryviu · ‎11-29-2023

Hi @skinnystick

Please add this code also

<style>
@media (max-width: 767px) {
#Banner-template--21681505534263__4d405492-4f5f-4a7e-a390-bff21aa89d56 .banner__media {
height: 71rem;
}
#Banner-template--21681505534263__4d405492-4f5f-4a7e-a390-bff21aa89d56 .banner__content { min-height: 70rem;  }
}
</style>

- 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.

skinnystick · ‎11-29-2023

Hi, it doesn't work.

Dan-From-Ryviu · ‎11-29-2023

Hi @skinnystick

Please update code and check again

<style>
@media (max-width: 767px) {
#Banner-template--21681505534263__4d405492-4f5f-4a7e-a390-bff21aa89d56 .banner__media {
height: 71rem !important;
}
#Banner-template--21681505534263__4d405492-4f5f-4a7e-a390-bff21aa89d56 .banner__content { min-height: 70rem !important;  }
}
</style>

- 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.

skinnystick · ‎11-29-2023

It works. Thank you

Dan-From-Ryviu · ‎11-29-2023

Very welcome

- 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.

graceatsabun · ‎11-01-2024

Hi there, I tried your code. But somehow, it doesn't solve my issue. Can you please help? My website is www.maisonsabun.com

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

Could you explain your request?

- 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.

graceatsabun · ‎11-01-2024

I wanted my mobile banner to be exact like this size. I tried to copy your code and paste it in my theme.liquid file, however it doesn't work. Can you please help?

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

You can try to use this code instead

<style>
@media  (max-width: 749px) {
    .banner__content {
        min-height: calc(100vh - 200px) !important;
    }
}
</style>

- 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.

graceatsabun · ‎11-01-2024

Thank you so much, it works perfectly now!

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

You are very welcome!

- 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.

Dawn Theme- Resizing banner image To Fit Mobile Screen

Dawn Theme- Resizing banner image To Fit Mobile Screen

Community Blog Articles