Different Image Size on Desktop and Mobile

DaveInvestment
Excursionist
14 0 5

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

Replies 241 (241)
Huedco
Tourist
3 0 3

Its huedco.com.au, but now it has gone wierd and says this Invalid CSS after " }": expected "}", was "" at 5989 but there is no 5989 on there?

 

Please help

KetanKumar
Shopify Partner
36839 3635 11972

@Huedco 

can you please try this code

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

.hero .hero__image {object-fit: contain;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
natalieWNDRLND
Tourist
5 0 1

hi, i am struggling with this too.

I have an image as the banner which fits perfect on the desktop version, however when I go to view via mobile it cuts off most of the image.

My website isn't live yet so i'm not sure if I can post a link!

I am also rubbish with changing codes etc. last time i did, I ruined my whole website and had to delete the whole thing to start again!

 

thanks,

 

natalie 

SherrifKad
Visitor
2 0 2

Hello @KetanKumar

I'm having a similar issue with my page. 

I'm running the Envy theme and my home page slideshow photos on the desktop view are far too big. Is there any way I can make these photos fit into one screen size?

The size looks perfect on the mobile view, but not the desktop. My webpage is https://kahliaskin.com.au/

Appreciate any advice to fix this. 

 

KetanKumar
Shopify Partner
36839 3635 11972

@SherrifKad 

can you please upload different image desktop and mobile

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
SherrifKad
Visitor
2 0 2

@KetanKumar 

Yes, I am able to have different photos for mobile and desktop. 

But how can I make the desktop photos fit the screen size?

KetanKumar
Shopify Partner
36839 3635 11972

@SherrifKad 

are you try this?

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mattisonfetters
Visitor
1 0 1

Hi @KetanKumar 

 

Can you help me with the mobile image sizing issues as well?

my domain is onlygroms.com

password is theak47son

 

thank you

KetanKumar
Shopify Partner
36839 3635 11972

@mattisonfetters 

can you please let me know what issue?

@smcboutique 

please share store url and issue images

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
smcboutique
Visitor
2 0 2
KetanKumar
Shopify Partner
36839 3635 11972

@smcboutique 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
SickBeast
Visitor
2 0 0

Hello Ketan,

Two images on my home page look great on desktop, but when I go to the mobile version it looks cut off. I'll show you the images. 

The first picture has wings that don't show like they do on the desktop version.

SickBeast_0-1626543860836.png

The second image is not wide enough or long enough to show on mobile as it does on the desktop.

SickBeast_1-1626543931529.png

Site URL: sickbeast.net

PW: ohsies

SickBeast
Visitor
2 0 0

Here is what the desktop versions look like for comparison:

 

1. 

SickBeast_0-1626544029319.png

 

2.

SickBeast_1-1626544050366.png

 

CScott327
Visitor
1 0 0

@KetanKumar I would love a little help on ours. Love everything except I cannot figure out how to get the mobile slide to fit in the screen. 

site is www.papascotts.com

 

 

Papascott
Visitor
1 0 0

@KetanKumar 

 

We are using Brooklyn and cannot figure out how to get the mobile slide to fit like the desktop one does.  Desktop is perfect, mobile is way to wide!!  Any help would be greatly appreciated!!

 

www.papascotts.com

 

Thank you!!

M_S_Aprameya
Tourist
3 0 1

Hello,

my store url is www.e-furbished.in and I wanted to increase the size of my images in mobile website only.

Please provide a solution as this is a very urgent issue for me.

KetanKumar
Shopify Partner
36839 3635 11972

@M_S_Aprameya 

This site can’t be reachedwww.e-furbished’s server IP address could not be found.
Try running Windows Network Diagnostics.
DNS_PROBE_FINISHED_NXDOMAIN
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
M_S_Aprameya
Tourist
3 0 1

@KetanKumar 

My store url is www.e-furbished.in and it is working perfectly now. Please check the website and do let me know how I can increase the size of my images on homepage only in the mobile website. I am using the supply theme. 

M_S_Aprameya
Tourist
3 0 1
The store url is www.e-furbished.in please check once again and let me know
Fidel
Visitor
1 0 1

Sir I tried your suggestion for the code above, It still did not work.

I am trying to make sure that I have the same photo from desktop to mobile but I want it to compress and the whole gif on the banner fits on the phone and its the whole picture can be seen or like compress.

 

Hope you can help me with this..

 

see website link for reference.. https://fedup-final-retouch.myshopify.com/ 

KetanKumar
Shopify Partner
36839 3635 11972

@Fidel 

Thanks for post

can you please share your store url.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
adriansee
Visitor
2 0 1

Hi need help with mine, brooklyn is my theme

KetanKumar
Shopify Partner
36839 3635 11972

Hello, @adriansee 

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
adriansee
Visitor
2 0 1

https://saint-tropez-online.myshopify.com/

 

for banner and the product cover photo. but I think the banner is fixed already? Just made it "Adapt to first image"

KetanKumar
Shopify Partner
36839 3635 11972

@adriansee 

Thanks for it

so do you need more?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Cece11
Visitor
1 0 1

Hi, 

I tried entering the code into the file and it's still not working. Is there anything else I could try ??

 

 

KetanKumar
Shopify Partner
36839 3635 11972

@Cece11 

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Andrada03
Tourist
7 0 1

Hello, I tried inserting the code for same size image for desktop and mobile. Any idea why it didn't work?

Thank you your answer will be much appreciated.

my shop: saga-market.myshopify.com

Andrada03
Tourist
7 0 1

desktop.pngmobile.png

KetanKumar
Shopify Partner
36839 3635 11972

@Andrada03 

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

sorry, your store is password protect can you please share us.
So I will check and provide a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Andrada03
Tourist
7 0 1
Thank you!
The password is eghahb
The store is not ready yet, hence the password.
cathdevries
Visitor
2 0 1

Hi there, I am having the same issue for my site - the homepage banner image looks great on desktop, but when switched to mobile version, the photo gets cut off significantly and the size does not adjust. I tried to copy and paste your code but it did not work for me. Is there something else that needs to be done?

I am using Broadcast theme for my website.

Thank you so much,

Catherine 

KetanKumar
Shopify Partner
36839 3635 11972

@cathdevries 

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

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
cathdevries
Visitor
2 0 1

Hi Ketan thank you, here is my website URL:

https://rohswim.com/

It is not live yet however, do you need it to be or a pw?

KetanKumar
Shopify Partner
36839 3635 11972

@cathdevries 

yes, please send PM

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
sanderrisseeuw
Excursionist
17 0 5

@KetanKumar 

Hi KetanKumar,

 

I do have the same problem like the other ones. Im trying to figure this out for 2 days now but nothing works at the moment. My Desktop banner is perfect but if I go to mobile view the banner is wrong. Could you please help me with this problem?

 

Website url: www.breakinglimits.nl

Looking forward to your reply 🙂 

Wrong on mobile view.jpgGood on Desktop.jpg

KetanKumar
Shopify Partner
36839 3635 11972

@sanderrisseeuw 

Thanks for post

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

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
sanderrisseeuw
Excursionist
17 0 5

@KetanKumar 

Hi,

It worked! Thank you very much for helping me!

KetanKumar
Shopify Partner
36839 3635 11972

@sanderrisseeuw 

Thanks for your feedback and support 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
WesamS
Excursionist
11 0 5

Hello KetanKumar

I have the same problem so, I've tried the code it works but only with the upper photo the end-page lower one didn't work please help

 

WesamS
Excursionist
11 0 5

Hello KetanKumar

I've the same issue I tried the code it works with upper image but the lower En-page one didn't work

KetanKumar
Shopify Partner
36839 3635 11972

@WesamS 

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
WesamS
Excursionist
11 0 5

site url

beutygo.myshopify.com

password: skulta

I used a code and works but decreases image quality

KetanKumar
Shopify Partner
36839 3635 11972

@WesamS 

thanks for post 

can you please share a further issue screenshot?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
WesamS
Excursionist
11 0 5

2021-04-12 (1).png2021-04-12.png

KetanKumar
Shopify Partner
36839 3635 11972

@WesamS 

possible to look like this 

KetanKumar_0-1618226725614.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
WesamS
Excursionist
11 0 5

there are up and down spaces 

KetanKumar
Shopify Partner
36839 3635 11972

@WesamS 

yes your image landscape mode 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Aurouss
Tourist
4 0 1

Hello, I am having the same problem. Please could you help me? I want my homepage image to be fully seen without being cut off when viewing on the mobile.

My website url is https://aurouss.co.uk/ 

Thanks in advance,

Shannon

KetanKumar
Shopify Partner
36839 3635 11972

@Aurouss 

sorry for this issue can you please try this 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing