Image banner size for mobile and desktop Dawn

Solved

Image banner size for mobile and desktop Dawn

VARTIX
Excursionist
23 1 4

Hello!

I'm working on my store on the dawn theme and I want to make a custom image banner for the homepage.
The problem is that I can't find the right dimensions that will work for mobile and for desktop. Mobile is more important tho.

Do I need to change something in the code? Or is there a general rule of thumb for making image banners?

Thanks a lot!

Accepted Solutions (2)

Dan-From-Ryviu
Shopify Partner
10868 2142 2277

This is an accepted solution.

Hi @VARTIX 

You can create 2 Image banner sections, one for desktop and one for mobile, then add code to the Custom CSS of each section to hide the desktop section on mobile and vice versa so you can add different image dimensions.

Add this code to Custom CSS of mobile section

@media (min-width: 750px) {
.banner { display: none; }
}

And this code to desktop section 

@media (max-width: 749px) {
.banner { display: none; }
}

 

 

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- 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

VARTIX
Excursionist
23 1 4

This is an accepted solution.

This seems like the solution i'm looking for, but I don't fully understand it yet.

1: What are the dimensions I need to use for mobile and desktop? or can they be the same?
2: Where do I upload both image banners? In image banner 1 and image banner 2? or somewhere else?
3: How do I add the custom code to the mobile section only?

Thank you in advance!

View solution in original post

Replies 8 (8)

Dan-From-Ryviu
Shopify Partner
10868 2142 2277

This is an accepted solution.

Hi @VARTIX 

You can create 2 Image banner sections, one for desktop and one for mobile, then add code to the Custom CSS of each section to hide the desktop section on mobile and vice versa so you can add different image dimensions.

Add this code to Custom CSS of mobile section

@media (min-width: 750px) {
.banner { display: none; }
}

And this code to desktop section 

@media (max-width: 749px) {
.banner { display: none; }
}

 

 

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- 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.

VARTIX
Excursionist
23 1 4

This is an accepted solution.

This seems like the solution i'm looking for, but I don't fully understand it yet.

1: What are the dimensions I need to use for mobile and desktop? or can they be the same?
2: Where do I upload both image banners? In image banner 1 and image banner 2? or somewhere else?
3: How do I add the custom code to the mobile section only?

Thank you in advance!

Dan-From-Ryviu
Shopify Partner
10868 2142 2277

1. They cannot be the same. I highly recommend 1920(width) * 1080(height) for desktop and 600(width) * 800(height) for mobile.

2. Just add in banner 1 each section 

3. Add code to Custom CSS of each section follow my above guide 

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- 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.

VARTIX
Excursionist
23 1 4

I don't know what you mean with section.

Do you mean this with section? See SS Screenshot_30.png

Dan-From-Ryviu
Shopify Partner
10868 2142 2277

That is device preview, please click + Add section, and add 2 Image banner sections 

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- 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.

VARTIX
Excursionist
23 1 4

It worked! Thank you so much!

Element1
Excursionist
50 0 9

thank you for sharing this! i’ve used it, and it’s worked. is there a way to ensure that those viewing on a tablet also see the mobile version?

Quantumink1
Visitor
1 0 0

THANK YOU VERY MUCH!!!! I was going crazy with this😥