Dawn theme- Changing the image height in image banner section

Store Design
1

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

2

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

3

@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