Different Image Size on Desktop and Mobile

[DaveInvestment]

Hi guys

Is it possible that I can use different image sizes on desktop and mobile?

For example my main banner needs to be smaller on mobile, so that the full image shows up.

I am using the Debutify theme 2.0.2

Best Regards

David

[natalieWNDRLND]

thank you!

it's www.wndrlnd.uk 

password: prieck

[KetanKumar]

@natalieWNDRLND 

your mobile banner to smaller 

[natalieWNDRLND]

any ideas how to change that? it's the perfect size on the desktop!

[KetanKumar]

@natalieWNDRLND 

can you please try this 1920x768 may its work 

[natalieWNDRLND]

is this the size of the photo i should use?

[KetanKumar]

@natalieWNDRLND 

yes, please 

[natalieWNDRLND]

how do I change the size of the photo?

[MarieMinks]

Hello, 

I am having the same issue. On the desktop it looks great but as soon as I view my website on my mobile device, it's enlarged. The image doesn't fit on the screen. Is there anyway I can change the size of the image on my mobile device only? 

I will attach my shop url below. 

https://marieminks-llc.myshopify.com/

Thank you in advance. 

[KetanKumar]

@MarieMinks 

sorry for this issue please use theme customization slideshow section image adapt height image option 

[MarieMinks]

I am not sure what you're referring to.

[KetanKumar]

@MarieMinks 

do you need different image desktop and mobile?

[Kts]

Hello. I am trying to change the size of my laptop or computer pictures on my slide show. It is showing the correct size on mobile but it cuts off the top part of all shirts on desktop, etc. 

[mkamalkayani]

Hi,

@Kts could you provide your store url?

[Kts]

ktsmithcollection7

[Kts]

I was told that I needed a code to adjust it. 

[mkamalkayani]

Hi, 

yes, this requires knowledge of html, css, and liquid. I can do that for you. If you are interested, feel free to send me a personal message and we can discuss the details.

Thanks

[nicole-127]

Hello Ketan,

Could you please help me with the same issue? I wasnt sure using the same code would help or not.

I prepared a video (uploaded as asset) and used it in slideshow window. Mobile and desktop crops it differently.

Mobile crops more. Size of the video is 2000x600 but i have a 1920x1080 version as well. Which size should i use and

can you help me with the cropping issue?

Thank you

[KetanKumar]

@nicole-127 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[smcboutique]

hello I am having the same problem could you help please

[Realleonsmith]

Hi Ketan 👋 

[KetanKumar]

@Realleonsmith 

yes, please try this code

https://www.mojoin.com/show-shopify-banner-image/

[ctucker]

I am having the same issue. I would like my top & bottom photo to fully show on the mobile version. 

Site: https://elite-champion.myshopify.com/

Code: elitec

[KetanKumar]

@ctucker 

sorry for this issue can you please try this 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

@media only screen and (max-width: 749px) {
#shopify-section-hero-1 .hero--x-large {
    height: 200px;
    background-size: contain;
}
}

[ctucker]

It worked for the top picture, but not the bottom one. 

[KetanKumar]

@ctucker 

yes, please add this code 

@media only screen and (max-width: 749px)  {
#shopify-section-hero-2 .hero--medium {
    height: 104px;
    background-size: contain;
}
}

[ctucker]

@KetanKumar You've been so helpful! Is there a reason it does fit the whole screen width wise. Like it lease space between the pic and edge of screen.

Secondly, on a mobile device can I change the picture in the middle of the single kid to be a tad smaller? It looks huge compared to the other pictures once they fit the screen. 

[KetanKumar]

@ctucker 

it was depending your image size its possible to simple code that way if you need a different image on mobile it can be done some customization code 

[Big_wins]

Hello 

Yes, it's possible to have different size of image both on phone and desktop view, kindly reply to my message for more discussion, thanks alot 

Best Regards

[ethosofc]

@Big_wins 

Thanks for your reply, I had an evolution on this topic, but it's still not what I'm looking for

@KetanKumar 

I tried this and worked, thanks a lot! But doing that I had another problem, doing this I'll miss the slide show, right?

[KetanKumar]

@ethosofc 

yes current new section 

[Aemaay]

I can not find any thing related Dawn 2.0 theme. I need different size images for desktop and mobile 
This tutorial is not working, since it is for debut theme. (https://www.mojoin.com/show-shopify-banner-image/)

Also, I don't want to go for adapt option since the image size looks so much small in Mobile screen.
An option for uploading two different size images, one for mobile and one for desktop will be appreciated.

[Aemaay]

TIA

[KetanKumar]

@Aemaay 

sorry for that issue can you please share store url and issue images!

[Aemaay]

https://ema81ocefsah13i0-45760610455.shopifypreview.com

Here is the store url, this is just a preview of my new theme and design. The New arrival part looks good on desktop but looks so bad on mobile phone.

[KetanKumar]

@Aemaay 

thanks for url can you please share issue images

[Aemaay]

[KetanKumar]

@Aemaay 

yes i can see that view its proper no issue as per your theme 

[Aemaay]

it is okay but no okay in term of marketing. The banner should cover the whole screen,  is there any solution?

[KetanKumar]

@Aemaay 

yes but your image white black spacing 

see attachment 

https://cdn.shopify.com/s/files/1/0457/6061/0455/files/Untitled-2_843e1388-cbd4-4c4d-87a3-ddd6f37df6...

[laplumeofficial]

 

Hi, I need help to. I have DAWN THEME and I would like to have bigger main banner on mobile only.

Something like that. It is possible?

NOW 

 And I would like to have

Thank you so much!

 

[1677081]

THIS IS CRAZY. Everyone is having the same exact problem with mobile images needing to be a different size and shape than laptop view. Why does support keep asking for screenshots? Its the exact same problem for everyone. We just need a solution. Can we upload two different sets of pix, one for mobile and one for laptop when necessary? or do we need to create a laptop size image than still looks ok when chopped off at the sides?   This is SO OBVIOUS. It makes no sense for support to ask to look at every site. JUST GIVE IS THE FIRMULA TO SOLVE THIS ISSUE- TYPE OF IMAGE- SIZE OF IMAGE. So we dont all have to ask separately over and over again.

[KetanKumar]

@1677081 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. 😊

Please share your site URL,
So I will check and provide a solution here.

[TheMoonK]

Hello need help here as well 

website and desktop picture does not align