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
Hi @KetanKumar
Is there a way to use different banner on desktop and mobile? If so, could you help me out?
Website: https://thedrchen.com/
It can be done by doing some code customization. Please take the help of a developer and hire Shopify Expert or me
Hi,
Thank you so much for your response. Yes, attached is a screenshot of what it looks like when I look at my website on a mobile device.
I have the same problem. Could you please help
Hello, @Jayanth
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.
My site url is as follows
Shopify url: vsindia.myshopify.com
website: mojoscloset.com
It can be done by doing some code customization. Please take a help of a developer or contact me
Hello,
I am having the same issue on my website. I tried to use the code that you provided and it did not work unfortunately. The image on the desktop site for the first slide is too big and it cuts off the full picture. On the mobile website, the second two pictures are too big and you can't see them fully.
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.
Thanks for store ulr
do you need different image mobile and desktop?
@KetanKumar no the issue is that the pictures cut off on the website they look different as in some pictures looked zoomed in on the desktop website and some look zoomed in on the mobile website
can you please share screenshot further issues
Thanks
sorry, but I can't see any images.
can you see now?
Hello!
I tried adding to code you give to everyone but is not working for me. Please help!!
eghahb pass
can you please upload proper images
some think like the demo theme
https://themes.shopify.com/themes/debut/styles/default/preview
maybe upload image 1920x1080 as your design
Dear Ketan Kumar,
we have the same problem on our page, which is called levienne.com. We're currently using the Brooklyn Theme. The problem of our page is the slideshow. We want to show the whole image instead of a cropped one for desktop users. I hope that this is possible.
Hello Ketan ,
This is how my desktop homepage picture looks its off
This is how my mobile homepage looks which is also off- only one picture shows up accurately sized
I don't know how to fix it
Welcome to the Shopify community!
and Thanks for your question.
Please share your site URL,
So I will check and provide a solution here.
It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like
Anybody have an idea on why the coding doesnt work for my site? It's really stretched on my site and hard to navigate.
hairbywilneka.com
password: Morgan17
Please advise.
Thanks for it
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--large {
height: 190px;
}
}
Thank you! It worked
hello ketan,
im not sure why my page specifically would need some custom code
optimization. I am looking for something quick and simple to fix this as i
have been on this forum searching for help for a month. In addition i
never received a message from you
what's issue for you store can you please let me know so i will guide you.
please share us image or video
It can be done by doing some code customization. Please take the help of a developer and hire Shopify Expert or me
Yes, please check your inbox
Thanks, i will check and update
Hi Ketan Kumar,
I would like to decrease the image size of sections "images with text" on mobile in my Debutify theme (astromus.myshopify.com PW: Astromus2021), as the images are too big in relation to the text (see screenshot). Actually, I would like to create a copy of the section, where this is the case, so I can in the future still have the custom version. Could you please help with that?
Best,
Dominik
Thanks for the details.
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media screen and (max-width: 769px) {
.featured-columns-section .image {
max-width: 180px;
position: relative;
}
.image-wrapper {padding-top: 0 !important;}
}
Thank you for the quick reply! The image is now shown the following way (see screenshot). Can you help me by making sure, that there is not that much space between text and image?
Best,
Dominik
thanks, update
sorry i can't see this code
thanks i have update my above code can you please copy and past again
@KetanKumar Dear Kumar,
I have another issue. For some reason, the product picture is not showing on the mobile version anymore (see pictures) - both on the home page as well as the product page.
www.astromus.de - PW: Astromus2021
Thanks!
@KetanKumar I have investigated further. The reason seems to be the code you posted. I have duplicated the shop before adding the code. There, everything is fine. If I add the code, the same happens. Looking forward to your reply, thank you!
Hi Kentan,
I am also having this problem but m desktop photos are too big but it looks good on mobile?
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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024