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

[Aurouss]

Thankyou for your help. However, it isn't a banner image. It's the image on the homepage that says "shop now" on it. I tried the link you gave me and I managed to code it but it gave me the option to create a new section and upload a banner image to the page and I couldn't place text over it. I have attached the picture so you can view what my issue is. 

[KetanKumar]

@Aurouss 

look at that its fine?

[Aurouss]

Yeah that’s what I’m trying to get. Could you explain how I can get my mobile homepage to look like that? Also I may need to alter the image dimensions so it doesn’t leave so much of an awkward gap above and beneath.

Thankyou

[BrokenHearted]

Hello, I am having issues with decreasing the image sizes on our desktop version of our website. they look perfect sized on mobile but are very scaled on the desktop version. This is only a problem for the three images in the slide show in header. please help thankyou!

[MitchellFly]

Hi Ketan!

If we wanted to do this with just regular images inserted into Shopify pages, how would we go about it? I assume the code wouldn't be for the hero image, correct?

[KetanKumar]

@MitchellFly 

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.

[fel]

Hi can I'm not online yet. But if u can give me email, I can sent u the
code and website.

[KetanKumar]

@fel 

 Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help

[JADEboutique1]

hello ,

How do I get my shopify desktop version to look like my mobile version ?

My website is

www.shopjadefashow.com

My email is jadefashows@gmail.com

[KetanKumar]

@JADEboutique1 

oh sorry for that issue 

can you change theme setting at slideshow choose adapt height or you can upload different banner desktop and mobile 

[JADEboutique1]

I don't understand what you mean Do I have to the height . I want to mobile
version to match my desktop verison

[KetanKumar]

@JADEboutique1 

i mean check your theme setting 

[JADEboutique1]

If I want my mobile verison and desktop to match. I have to check my
theme. I have the Brooklyn theme what do you suggest . I do is it possible
to have image size to match what my mobile version looks like or what
should I do . The desktop version is too big and doesnt look good.

[RamezMehio]

Hello @KetanKumar can you please assist me with the image issue of my website? I'm trying to change the image because the desktop and mobile are not aligning 

[KetanKumar]

@RamezMehio 

can you please send store url so i will check let you know 

[RamezMehio]

Hello @KetanKumar www.furry-friendz.com

[RamezMehio]

Hi @KetanKumar the URL for the different picture was provided is anything else needed? Awaiting your reply please www.furry-friendz.com

[RamezMehio]

Hello @KetanKumar Please inform me if you can assist otherwise I'll need to find another resource. It has been a few days already

[andream23]

Hello, Im having the same issue. The theme we are currently using is "debut" and when we go from desktop to mobile, it changes the size of our gallery image on mobile. Is there anyway to fix this issue so it stays the same how it looks on desktop as to mobile. My shop is shopsolita.com for reference 

[KetanKumar]

@andream23 

sorry for this issue 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 749px) {
#shopify-section-1599879620051 .image-bar--x-large .image-bar__content, #shopify-section-1599879620051 .image-bar--x-large .image-bar__item {
height: 220px;
}
}

[dgil223]

i need help! on my mobile my header size is great. but for desktop is too small. can you help me fix this problem? 

thank you- 

Denny 

[meganehebert]

Hello,

I have the same problem with my website. Can you please help me. I tried to enter the code, but it still doesn't work.

Thank you !

[KetanKumar]

@meganehebert 

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.

[meganehebert]

Hello Ketan, 

omg I never received the notification for your message so sorry for the late reply.

here is the URL : https://malamabebe.com/

here are the problems :

1. On the desktop version my slideshow only show my first image (but there is 4 images).

2. On the desktop version, the photos is all cropped so it doesn't look good at all...

3. On the mobile version, the slideshow doesn't slide automatically, I always need to do it manually.

Thank you so much for helping !

Mégane 

[meganehebert]

Hello @KetanKumar, 

omg I never received the notification for your message so sorry for the late reply.

here is the URL : https://malamabebe.com/

here are the problems :

1. On the desktop version my slideshow only show my first image (but there is 4 images).

2. On the desktop version, the photos is all cropped so it doesn't look good at all...

3. On the mobile version, the slideshow doesn't slide automatically, I always need to do it manually.

Thank you so much for helping !

Mégane 

[KetanKumar]

@meganehebert 

thanks for details 

can you please share further issue images?

[meganehebert]

 

 

Hi !

sure here are the pictures !

[KetanKumar]

can you please try this code desktop and mobile different image

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

if any issue let me know

[meganehebert]

Hello @KetanKumar 

It was helpful, but it is not a slideshow like I wanted 😞

Now it is just one picture (see screenshot)

[meganehebert]

@KetanKumar 

Here is what I would like to achieve :

1. this is a screenshot of my actual theme on a desktop. You can see there is only 1 picutre. I don't understant because in my theme I choose a slideshow and selected four pictures. But you can see on the desktop we only see one picture... 

[KetanKumar]

@meganehebert 

can you please upload desktop image size 1920x650px and mobile 768x1024px

[tncgeorge]

Hi there, also trying to make our home screen image, compatible for both mobile and desktop devices.

The mobile version cuts out half of the image!

I don't have the /theme.scss.liquid section In my assets.

Thanks,

[KetanKumar]

@tncgeorge 

yes please code and let me know your store url i will check and let you know 

[tncgeorge]

Thanks so much Ketan!

https://the-neighbours-cellar.myshopify.com/

[KetanKumar]

@tncgeorge 

thanks, URL

sorry but i can't see banner

[tncgeorge]

Sorry! - what do you need me to provide you with? Thanks

[KetanKumar]

@tncgeorge 

i mean i can't see any banner at home page can you please show me!

[ethosofc]

Hi everybody,

I'm also having problem with the sizing of my website banners mobile/desktop.

The banner size in desktop is bigger than I would like. And on mobile is smaller than I would like.

I would like a bit small height on desktop. And on mobile I would like a bit bigger height.

The sizing on mobile is like this now:

But I would like bigger, like this:

Is that a sizing or coding problem? Is that possible?

My URL is: greko-shop.myshopify.com

Thanks in advance!

[KetanKumar]

@ethosofc 

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

try this 

[Boutiqueeclicia]

Hi! Can you help me with this on my site as well? 

Www.boutiqueeclicia.com

[gzef]

Hello. I have the same issue. I use Dawn theme and i cant find this section  theme.scss.liquid  in the Assets. How can i do this in Dawn theme?

[KetanKumar]

@gzef 

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

[ahovey1902]

Can you look at my URL?  accesswoundcare.com  on mobile the product page looks good and the images are the correct size, but on Desktop the images are massive and make the page unusable. 

[HAMZALARME1212]

HELLO 

I HAVE THE SAME THING I WANNA KEEP THE SAME FORMAT OF THE PICTURE OF MY IMAGE SECTION FROM THE DESKTOP MODE TO THE MOBILE MODE.

AND THANK YOU IN ADVANCE 

[myloxxi]

Hello! I have the same issue and wanting to get the same view that is shown on desktop for my homepage (in particular one photo) and have that same view on mobile device insted of currently having the picture cropped. Thanks!

[UmairA]

Hi @myloxxi ,

Are you able to provide your store URL so I can take a closer look and provide the solution here?

[fel]

I have debutify theme. And on my mobile phone, u see photo's from the collection list half. For example the shoe is half . ANd u dont see the women face. How can i change this? I have put the section height extra large to see it more clear.

[shwetart]

Hello,

I need help here too. The image I have put on collection page is perfect when see on desktop but on mobile it is cropped. 

this is the site www.mystiqliving.com

[lvnt_aaa]

Hello, whnever i use the image with text overlay or slideshow, the image gets cropped so not everything is displayed. Also if an image with text overlay or slideshow is good on desktop, on mobile is zoomed in a lot. How can i have an image look the whole size and same quality on both desktop and mobile.

 store: 

www.koskins.com

 adress:

skinroutinelondon.myshopify.com

[KetanKumar]

@lvnt_aaa 

can you please add this code

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-16173671534d898061 .hero--small {
    height: 200px;
}
}

@natalieWNDRLND 

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.