Shopify themes, liquid, logos, and UX
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
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
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;}
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
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.
can you please upload different image desktop and mobile
Yes, I am able to have different photos for mobile and desktop.
But how can I make the desktop photos fit the screen size?
are you try this?
https://www.mojoin.com/show-shopify-banner-image/
Hi @KetanKumar
Can you help me with the mobile image sizing issues as well?
my domain is onlygroms.com
password is theak47son
thank you
can you please let me know what issue?
please share store url and issue images
https://www.mojoin.com/show-shopify-banner-image/
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.
The second image is not wide enough or long enough to show on mobile as it does on the desktop.
Site URL: sickbeast.net
PW: ohsies
Here is what the desktop versions look like for comparison:
1.
2.
@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
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!!
Thank you!!
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.
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
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.
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/
Thanks for post
can you please share your store url.
Hi need help with mine, brooklyn is my theme
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.
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"
Thanks for it
so do you need more?
Hi,
I tried entering the code into the file and it's still not working. Is there anything else I could try ??
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.
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
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.
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
Welcome to the Shopify community!
and Thanks for your question.
Please share your site URL,
So I will check and provide a solution here.
Hi Ketan thank you, here is my website URL:
It is not live yet however, do you need it to be or a pw?
yes, please send PM
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 🙂
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;
}
}
Thanks for your feedback and support
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
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
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.
site url
beutygo.myshopify.com
password: skulta
I used a code and works but decreases image quality
thanks for post
can you please share a further issue screenshot?
possible to look like this
there are up and down spaces
yes your image landscape mode
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
sorry for this issue can you please try this
https://www.mojoin.com/show-shopify-banner-image/
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024