Resizing of Images for Banner with Dawn Theme

[fashionfables]

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 

[Victoria]

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. 

[fashionfables]

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 ? 

[Made4uo-Ribe]

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:

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

[fashionfables]

hey there 

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

[fashionfables]

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

[EFOLI-Syn]

Hello @fashionfables,

You can add this following code into your base.css file to work. 

@media(min-width:980px){
.slideshow__media.media>*:not(.zoom):not(.deferred-media__poster-button), .slideshow__media .media model-viewer {
    object-fit: contain !important;
}
}