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
your mobile banner to smaller
any ideas how to change that? it's the perfect size on the desktop!
can you please try this 1920x768 may its work
is this the size of the photo i should use?
yes, please
how do I change the size of the photo?
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.
sorry for this issue please use theme customization slideshow section image adapt height image option
I am not sure what you're referring to.
do you need different image desktop and mobile?
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.
ktsmithcollection7
I was told that I needed a code to adjust it.
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
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
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.
hello I am having the same problem could you help please
Hi Ketan 👋
yes, please try this code
https://www.mojoin.com/show-shopify-banner-image/
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
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;
}
}
It worked for the top picture, but not the bottom one.
yes, please add this code
@media only screen and (max-width: 749px) {
#shopify-section-hero-2 .hero--medium {
height: 104px;
background-size: contain;
}
}
@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.
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
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
Thanks for your reply, I had an evolution on this topic, but it's still not what I'm looking for
I tried this and worked, thanks a lot! But doing that I had another problem, doing this I'll miss the slide show, right?
yes current new section
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.
TIA
sorry for that issue can you please share store url and issue images!
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.
thanks for url can you please share issue images
yes i can see that view its proper no issue as per your theme
it is okay but no okay in term of marketing. The banner should cover the whole screen, is there any solution?
yes but your image white black spacing
see attachment
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!
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.
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.
Hello need help here as well
website and desktop picture does not align
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