Resizing image to fit image banner at Dawn

Technical Q&A

Topic summary

Issue: Image in the Dawn theme’s Image banner is being cropped; resizing the source image has no effect, and the Adapt image option makes it appear too large. Goal: fit to a medium banner height without cropping.

Actions and outcomes:

  • A custom edit in theme.liquid (main layout file) above the closing body tag resolved sizing for the poster by adjusting a max-width parameter. The exact code wasn’t provided in the thread, but the key tweak was changing max-width to control banner size.
  • Another participant fixed width behavior by switching from a percentage (e.g., 40%) to a fixed pixel value (e.g., 1100px) for max-width.

Related issue and fix:

  • Banner looked darker than surrounding areas. Setting the Image banner opacity slider in theme settings to zero removed the dark overlay.

Open questions:

  • How to apply the custom code to all Image banners on a page (not just one).
  • How to change the banner container height to prevent bottom cropping.

Status: Partially resolved via custom CSS and opacity adjustment; some implementation details remain unanswered.

Summarized with AI on January 7. AI used: gpt-5.
1

Hi there,

I am trying to fit my image to the image banner on the Dawn theme, this is my URL:
https://dingastreetfashion.myshopify.com/?_ab=0&_fd=0&_sc=1

I have tried using the image resizer on the original image but id does not have any effect on the image, which is being cropped exactly the same, no matter how I resize the image.
The ‘adapt image check box’ makes the image looks to big, I just want it to fit to the medium banner height.

Thanks

1 Like
2

Hi @JustinTharpe ,
I removed the password, please give it another try.

Thanks

1 Like
3

I actually ended up using a similar code that I already inserted to my theme.liquid file:

So if anyone has the same issue just paste this in theme.liquid above the written at the bottom, and use the 1’st max-width parameter to change the size of the banner.

1 Like
4

@JustinTharpe
But on a slightly different subject, do you know maybe why the image banner color is slightly darker than the color around it?
Seems like it has an opacity around it, but I set the opacity of the image banner to 0 in the customization.

5

This works for one image banner on the page.

How can I apply this code to all image banners on the page?

6

I am having the same problem, but my issue is width the height of the image, not the width. I have reseized it multiple times in PS and it STILL cuts off the bottom of my image. How do I change the container size for the image?

7

There is an opacity slider in the image banner settings. Set that to zero. Took me forever to find this! LOL!

8

I changed the max-width: 40%
to
max-width: 1100px
pixels instead of percentage! saved my week from spiraling into madness!