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
2595 310 645

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

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
dmwwebartisan
Shopify Partner
9826 2238 3078

@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 | Bag is a cart drawer that maximizes your sales. View app →