FROM CACHE - en_header
Promotion image

Dawn Theme- Resizing banner image To Fit Mobile Screen

Solved

Dawn Theme- Resizing banner image To Fit Mobile Screen

skinnystick
Tourist
10 0 1
‎11-28-2023 08:33 AM

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

skinnystick_0-1701178231072.png

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

Labels:
1,427 Views
0 Likes
Report
Accepted Solutions (2)

Dan-From-Ryviu
Shopify Partner
11721 2297 2478
‎11-28-2023 10:31 AM

This is an accepted solution.

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>

Screenshot_14.jpg

 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- 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

1,393 Views
0 Likes
Report
In response to skinnystick

Dan-From-Ryviu
Shopify Partner
11721 2297 2478
‎11-29-2023 03:27 AM

This is an accepted solution.

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 & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- 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

1,366 Views
0 Likes
Report
Replies 14 (14)

websensepro
Shopify Partner
1914 229 274
‎11-28-2023 08:40 AM

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/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
1,423 Views
0 Likes
Report

Dan-From-Ryviu
Shopify Partner
11721 2297 2478
‎11-28-2023 10:31 AM

This is an accepted solution.

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>

Screenshot_14.jpg

 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- 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.

1,394 Views
0 Likes
Report
In response to Dan-From-Ryviu

skinnystick
Tourist
10 0 1
‎11-29-2023 01:18 AM

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

1,383 Views
0 Likes
Report
In response to skinnystick

Dan-From-Ryviu
Shopify Partner
11721 2297 2478
‎11-29-2023 01:48 AM

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 & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- 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.

1,377 Views
0 Likes
Report
In response to Dan-From-Ryviu

skinnystick
Tourist
10 0 1
‎11-29-2023 03:21 AM

Hi, it doesn't work.

1,370 Views
0 Likes
Report
In response to skinnystick

Dan-From-Ryviu
Shopify Partner
11721 2297 2478
‎11-29-2023 03:27 AM

This is an accepted solution.

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 & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- 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.

1,367 Views
0 Likes
Report
In response to Dan-From-Ryviu

skinnystick
Tourist
10 0 1
‎11-29-2023 10:35 AM

It works. Thank you

1,355 Views
1 Like
Report
In response to skinnystick

Dan-From-Ryviu
Shopify Partner
11721 2297 2478
‎11-29-2023 10:57 AM

Very welcome

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- 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.

1,352 Views
0 Likes
Report
In response to Dan-From-Ryviu

graceatsabun
Tourist
8 0 2
‎11-01-2024 07:15 AM

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

753 Views
0 Likes
Report
In response to graceatsabun

Dan-From-Ryviu
Shopify Partner
11721 2297 2478
‎11-01-2024 07:23 AM

Could you explain your request?

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- 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.

751 Views
0 Likes
Report
In response to Dan-From-Ryviu

graceatsabun
Tourist
8 0 2
‎11-01-2024 07:25 AM

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?

graceatsabun_0-1730460280744.jpeg

 

750 Views
0 Likes
Report
In response to graceatsabun

Dan-From-Ryviu
Shopify Partner
11721 2297 2478
‎11-01-2024 07:32 AM

You can try to use this code instead

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

 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- 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.

747 Views
0 Likes
Report
In response to Dan-From-Ryviu

graceatsabun
Tourist
8 0 2
‎11-01-2024 07:40 AM

Thank you so much, it works perfectly now!

743 Views
1 Like
Report
In response to graceatsabun

Dan-From-Ryviu
Shopify Partner
11721 2297 2478
‎11-01-2024 08:03 AM

You are very welcome!

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- 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.

735 Views
0 Likes
Report

Community Blog Articles

441285313-63bbef53-3fbe-4e8b-a706-5b37afa90468.png
Automate store operations with Shopify Academy & Coding with Jan

Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...

By Jacqui May 7, 2025
April.jpg
Highlighting our Members of April '25

Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...

By JasonH May 2, 2025
page_thumb_partner.jpg
Enhance a brand’s visibility with Shopify Academy's new SEO resources

Discover opportunities to improve SEO with new guidance available from Shopify’s growth...

By Jacqui May 1, 2025
Terms of Service Privacy Policy