How to resize image banner in Dawn theme without cropping?

Store Design
1

Hello - I’m using the Shopify dawn theme and have figured out how to change the height of the image banner, but the image is not adjusting to the correct size when in full screen. Part of the top and bottom of the image is cut off. If anyone knows how to fix, it would be greatly appreciated.

Thank you!

Lauren

2

Hello @LaurenPT could you please share your website link and please attached the screenshot of that image you want to resize.

Thanks

Rohail Ali

3

Hi Rohail,

Thanks so much for your response. I’ve included to screen shots, one shows the page in full screen where the banner image is cut off and the other shows the image when the window is smaller. Please let me know if I can provide anything else.

https://www.theposhtech.com/

image cut off.jpg
image cut off.jpg499×249 24.2 KB

image full size.png
image full size.png1427×828 214 KB

4

Hi @LaurenPT ,

You can try the following instructions.

  1. In your Admin store, click Online store > Themes
  2. Go to the theme you want to edit, click Actions > Edit code
  3. In your Asset folder, open the base.css and add the code below
@media only screen and (min-width: 1200px) {
.banner > .banner__media > img {
    object-fit: fill;
}
}
1 Like
5

That worked, thank you so much!! I really appreciate it.

1 Like