Image size is different on mobile and desktop

Store Design
, ,
1

I am having issue the images on the mobile are perfect but not on desktop.The website on the desktop looks messed up because of images.how can I resize them in desktop.

2

@SK1A1

Please share your store URL!

Thanks!

3

https://tagoros.com/?_ab=0&_fd=0&_sc=1

4

@SK1A1

Please the following CSS code to your assets/ base.css bottom of the file.

@media screen and (min-width: 990px) {
.media>img {object-fit: initial !important;}
}

Shopify Dawn Theme Image Sizes

Image Type Width Height Aspect Ratio
Product Image 700px 700px -
Collection Image 550px 550px 1:1
Slideshow Image 1600px 1050px -
Blog Post Image 720px 1080px -
Text Overlay Image 1600px 1050px -

In order to get the best performance and visual looking, I highly recommend 1920(width) * 1080(height) for desktop and 800(width) * 800(height) for mobile.

Image Sizing Tips for Dawn Theme

  • Use the adapt-to-size feature for the Text Overlay Image to ensure the text neatly aligns with the image

Thanks!

5

The image got very smaller I thick I have to adjust by table images size to get them perfect.thank you

6

Adjusted the image by slide height(adapt to first image) now everything is perfect.thank you for helping

7

Hey I am having problems with my site. I want to to be this picture. On the mobile version it looks nice but on desktop it isn’t.

Please help me because I want to start selling.

www.storefcc.com

best regards

8

hi… size for desktop and mobile both are different
1920(width) * 1080(height) for desktop and 800(width) * 800(height) for mobile.

… its very difficult to achieve good looking slider on both media with same image in esp. when the slider has a model image. It crops / focuses the image awkwardly.
Is there a way where i can upload different images for each media with respective pixel size for same slider ??

9

Hi!

For desktop, I tried both sizes 1600x1050 and 1920x1080 for my homepage slideshow. I have edited the code to have responsive images where it shows different banners on mobile and desktop. The mobile one shows perfectly for 800x800 images but the desktop images are always cropped from the top and bottom. You can see my store here: www.bronoun.in
You can open the top slideshow images in a new tab in the browser and you’ll see that significant portions are getting cropped.

What can I do to fix this?