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

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
37094 3645 12053

@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
37094 3645 12053

@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
37094 3645 12053

@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

Ketiabell
Shopify Partner
11 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
37094 3645 12053

@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
Ketiabell
Shopify Partner
11 0 4
KetanKumar
Shopify Partner
37094 3645 12053

@Ketiabell 

yes please share issue images?

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
Ketiabell
Shopify Partner
11 0 4

The problem is I settled for a premade banner. I want to use a banner I created in Canva designing tool and use that for my banner. When I attempt to upload it, it tells me I cant because it exceeds 20 megapixels. What should the measurements be for Dawn theme banner? 

KetanKumar
Shopify Partner
37094 3645 12053

@Ketiabell 

yes please reduce image size doesn't support 20 mega pixel image size 

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
Ketiabell
Shopify Partner
11 0 4

@KetanKumar Do you recommend me an app to resize the photo without losing quality?

KetanKumar
Shopify Partner
37094 3645 12053

@Ketiabell 

you have try this 

https://apps.shopify.com/photo-resize-by-pixc

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

OUTSIDEGRID
Shopify Partner
13 3 9

@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