Image Banner Height on dawn theme

Solved

Image Banner Height on dawn theme

mgrp
Excursionist
19 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
19 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
169 17 15

@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
19 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 268

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
8532 1682 1692

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 and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

mgrp
Excursionist
19 1 3

That made the entire image banner disappear

mgrp
Excursionist
19 1 3

This is an accepted solution.

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