Resizing of Images for Banner with Dawn Theme

Shopify Discussion

Topic summary

Main issue: A merchant using the Shopify Dawn theme cannot get a slideshow banner image to fit properly despite creating it to the required size.

Key guidance and constraints:

  • Shopify staff referenced Image Size Guidelines: 1280 x 720 px (desktop) and 360 x 200 px (mobile), and asked for the merchant’s current dimensions.
  • The merchant’s Dawn version does not offer separate desktop/mobile image uploads; only mobile layout alignment (left/center/right) is available.

Attempted fix and result:

  • A community member suggested a CSS override (changing slideshow media object-fit to inherit). A code snippet and screenshot were provided.
  • After applying it, the merchant reports the mobile version is now stretched.

Additional issue:

  • “New Arrivals” product images look blurry on desktop but not on mobile. Images were imported from Etsy via Shuttle rather than uploaded directly.

Status:

  • No confirmed solution yet. Open questions include how to handle responsive banner sizing in Dawn without separate mobile images and how to resolve desktop blurriness of imported product images.

Notes: The CSS code snippet and an image attachment are central to understanding the proposed fix and its side effects.

Summarized with AI on December 22. AI used: gpt-5.
1

Hey all,

i am trying to change my banner to promote a sale. I have made the banner according to the size requirements, however it still does not fit properly. I am useingthe dawn theme. and my website is here https://www.fashionandfables.com/ you can see the first image in the slideshow and how the image doesn’t fit. I have spent hours trying to figure it out.. to no avail. Hoping someone can help.

thank you

1 Like
2

Hi there, @fashionfables .

Thanks for posting your question to the Shopify Community.

I understand you’re using Dawn theme and trying to resize your image banner. What are the current measurements you’ve resized your image banner to?

Were you able to check out our Image Size Guidelines? For Hero Image on Desktop image dimensions (W x H) it should be 1280 x 720 pixels. For Mobile, it should be 360 x 200 pixels.

3

Hi @fashionfables

Check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.slideshow__media.media>*:not(.zoom):not(.deferred-media__poster-button), .slideshow__media .media model-viewer {
    object-fit: inherit;
}

And Save.

Result:

Made4uoRibe_0-1723592531267.png
Made4uoRibe_0-1723592531267.png1911×781 230 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

4

hey Victoria, thanks for your message. on my dawn version I don’t have the option to upload two images . it says image . and then below there is mobile layout section that says left, center and right but no option to upload another image ?

5

hey there

thanks for the reply. I tried it . but now inhave a problem. now on the mobile version everything is stretched out?

6

also, my new arrivals images look blurry on desktop screen, not on mobile. though these images are sharp. I am transferring from etsy using Shuttle, not uploading the images into shopify , if that makes sense i don know if this is the reason for this