Dawn theme- Changing the image height in image banner section

PABoucle
New Member
1 0 0

Hi guys,

Im working on the design of my page (dawn theme) and the image-banner section makes the image much too square for me- I'm looking for a panoramic - type of image - banner. I will be trying to change that in the "section-image-banner.css" code, but since there are multiple codes for different screen widths I was hoping there is a way to add a rule that changes the height of the image for all of the screen widths at once, instead of having to change each one individually.

 

Can somebody lend me a hand? 1. Is that possible to add just a single rule to make the height smaller for the section no matter the screen size? 2. What should the changes be?

 

Thanks in advance

Replies 2 (2)
Zworthkey
Shopify Partner
5581 642 1542

Hii, @PABoucle 
Kindly share your store URL so,
I can solve this issue.
Thank You.

dmwwebartisan
Shopify Partner
11515 2438 3530

@PABoucl 

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 ,PABoucle

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app