Dawn theme - how can I customize "Image Banner" height?

Laszlo2
Tourist
5 0 2

Hi,

Could you please help me customize the height of the "Image Banner" element in the Dawn theme?
(I would like to use the built-in free pictures, that's why simply cropping the image itself is not a solution for me)

 

Thank you!
Laszlo

Replies 15 (15)
KetanKumar
Shopify Partner
24919 2497 9034

@Laszlo2 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Laszlo2
Tourist
5 0 2

Hi @KetanKumar , sorry for the late reply.

https://rendeljmasnak-proba.myshopify.com/

password: "gyermek"

My problem is basically that the welcome image on the home page is too big, (with the kids standing back) it takes the whole screen.

It would be the best to decrease the size  in both dimensions, so avoiding the image to be cropped too much.
If you have a solution, I will need to experiment for the best result, across different screen sizes.

Thank you!
Laszlo

KetanKumar
Shopify Partner
24919 2497 9034

@Laszlo2 

do you mean like this?

KetanKumar_0-1632401306777.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Laszlo2
Tourist
5 0 2

Yes!

I'm looking forward the solution.
Additionally, if it is possible to find the parameters, to decrease the picture width as well. It would be nice to have the picture width less than the screen width.

KetanKumar
Shopify Partner
24919 2497 9034

@Laszlo2 

yes please me know mockup how do you have like?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Laszlo2
Tourist
5 0 2

Hi @Ketan

could you please elaborate on your previous question? unfortunately I didn't understand what you mean:

"yes please me know mockup how do you have like?"

Thanks

OUTSIDEGRID
Tourist
5 1 0

@Laszlo2 

Hi Laszlo,

To customize the height of the "Image Banner" element in the Dawn theme, first create a backup version of your site, avoid working in the original version!

Next go to the code editor. Click on Assets > section-image-banner.css . In the line 65 we will find the selector .banner_media with the height definition, if you want to make the image visible remove the height: 100%. 

@media screen and (min-width: 750px) {
  .banner__media {
    height: 100%;
  }
}

Save the changes before making a preview.     

I hope this helps! 

All the best, Bruno

 

Ketiabell
Tourist
10 0 4

Hello. I need some assistance with my dawn theme banner. For some reason it is not a landscape instead its a portrait. I know my score is down because of it. I think it's to big. I have an image I made on Canva specifically for my shopify dawn theme banner but when I try to upload it it says it cannot exceed 20 megapixels. I dont even know what that mean. Can you help me out please

KetanKumar
Shopify Partner
24919 2497 9034

@Ketiabell 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing