Re: Image Banner Height on dawn theme

Solved

Image Banner Height on dawn theme

mgrp
Excursionist
22 1 3

Hello all! I recently started using the image banner for the dawn theme but the default size isn't long enough on the page on mobile, the image is fine width wise but the length needs to go down further. Thanks in advance for any help with this! store url is michaelgrp.com

Accepted Solution (1)

mgrp
Excursionist
22 1 3

This is an accepted solution.

I solved this by adapting it to the desktop image, thanks all 

View solution in original post

Replies 6 (6)

mrashid
Shopify Partner
300 26 32

@mgrp use separate image for mobile

 

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
mgrp
Excursionist
22 1 3

Is there an option for that that I'm not seeing or is there a code involved? the original image is in portrait so the image banner is resizing/cutting off half the image to fit into the banner but I want the full image size on mobile. 

PageFly-Noah
Shopify Partner
1317 233 281

This is Noah from PageFly - Shopify Page Builder App

Hi @mgrp  You can check to see if the theme editor has the option to choose images for desktop and images for mobile. If not, you need to add code to reduce the height of the image.

 

Best regards,

Noah | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Dan-From-Ryviu
Shopify Partner
11574 2268 2447

Hi @mgrp 

I recommend you create 2 banner sections for mobile and desktop so you can add different image for each device, and then add this code to Custom CSS of each banner section

- Add this code to Custom CSS of the desktop banner

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

- Add this code to Custom CSS of the mobile banner 

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

 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.

mgrp
Excursionist
22 1 3

That made the entire image banner disappear

mgrp
Excursionist
22 1 3

This is an accepted solution.

I solved this by adapting it to the desktop image, thanks all