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)
drchen
Shopify Partner
6 0 1

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/

KetanKumar
Shopify Partner
36839 3635 11972

@drchen 

It can be done by doing some code customization. Please take the help of a developer and hire Shopify Expert or me

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
Blisstique
Visitor
2 0 1

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.

IMG_657CC4578C44-1.jpeg

Jayanth
Visitor
2 0 1

I have the same problem. Could you please help

KetanKumar
Shopify Partner
36839 3635 11972

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.

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
Jayanth
Visitor
2 0 1

My site url is as follows

Shopify url: vsindia.myshopify.com

website: mojoscloset.com

KetanKumar
Shopify Partner
36839 3635 11972

@Jayanth 

It can be done by doing some code customization. Please take a help of a developer or contact me

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
lashcarnival
Excursionist
12 0 4

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.  

KetanKumar
Shopify Partner
36839 3635 11972

@lashcarnival 

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
lashcarnival
Excursionist
12 0 4

Hello @KetanKumar

lash-carnival.myshopify.com

KetanKumar
Shopify Partner
36839 3635 11972

@lashcarnival 

Thanks for store ulr 

do you need different image mobile and desktop?

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
lashcarnival
Excursionist
12 0 4

@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

KetanKumar
Shopify Partner
36839 3635 11972

@lashcarnival 

can you please share screenshot further issues

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
Yes, thank you for the help!
This is desktop version
[image: desktop.png]
and this is mobile version.
[image: mobile.png]
KetanKumar
Shopify Partner
36839 3635 11972

@Andrada03 

Thanks 

sorry, but I can't see any 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
Andrada03
Tourist
7 0 1

desktop.pngmobile.png

can you see now?

Andrada03
Tourist
7 0 1

Hello!

I tried adding to code you give to everyone but is not working for me. Please help!!

eghahb pass

https://saga-market.myshopify.com/?key=6ef84ffc823faa77d0d11d3cf45683a423d8d7767b702dc49621d967d72eb...

KetanKumar
Shopify Partner
36839 3635 11972

@Andrada03 

can you please upload proper images

KetanKumar_0-1613320989689.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
Andrada03
Tourist
7 0 1
what should be the ratio? Thank you!
KetanKumar
Shopify Partner
36839 3635 11972

@Andrada03 

some think like the demo theme

https://themes.shopify.com/themes/debut/styles/default/preview

maybe upload image 1920x1080 as your design 

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
oeuz_
Visitor
1 0 0

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. 

 

Bildschirmfoto 2021-02-19 um 16.26.06.pngBildschirmfoto 2021-02-19 um 16.26.20.png

lashcarnival
Excursionist
12 0 4

Hello Ketan , 

This is how my desktop homepage picture looks its off 

 lcarndesktoperror.png

 

 

This is how my mobile homepage looks which is also off- only one picture shows up accurately sized 

 IMG_6889.PNGIMG_6888 2.PNGIMG_6890 2.PNG

 

 

I don't know how to fix it 

KetanKumar
Shopify Partner
36839 3635 11972

@lashcarnival 

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
lashcarnival
Excursionist
12 0 4

hello ketan, 

thanks for your response !

 

https://lash-carnival.myshopify.com

 

 

lashcarnival
Excursionist
12 0 4
KetanKumar
Shopify Partner
36839 3635 11972

@lashcarnival 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

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
Wilneka
Tourist
6 0 1

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.

KetanKumar
Shopify Partner
36839 3635 11972

@Wilneka 

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;
}
}

 

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
Wilneka
Tourist
6 0 1

Thank you! It worked

lashcarnival
Excursionist
12 0 4
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
lashcarnival
Excursionist
12 0 4

@KetanKumar 

 

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

KetanKumar
Shopify Partner
36839 3635 11972

@lashcarnival 

what's issue for you store can you please let me know so i will guide you.

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
lashcarnival
Excursionist
12 0 4
Click to expand...
 

@KetanKumar 

 

I have already previously mentioned it TWICE in this thread 

KetanKumar
Shopify Partner
36839 3635 11972

@lashcarnival 

please share us image or video

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
lashcarnival
Excursionist
12 0 4

@KetanKumar  Hello Ketan , 

 

I have already sent you pictures in a previous post on this thread 

KetanKumar
Shopify Partner
36839 3635 11972

@lashcarnival 

It can be done by doing some code customization. Please take the help of a developer and hire Shopify Expert or me

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
lashcarnival
Excursionist
12 0 4

@KetanKumar please check your inbox 

KetanKumar
Shopify Partner
36839 3635 11972

@lashcarnival 

Yes, please check your inbox 

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
lashcarnival
Excursionist
12 0 4

hello @KetanKumar please check your messages regarding this issue 

KetanKumar
Shopify Partner
36839 3635 11972

@lashcarnival 

Thanks, i will check and update

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
AstroMus
Tourist
5 0 1

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

IMG_4218.jpeg

KetanKumar
Shopify Partner
36839 3635 11972

@AstroMus 

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;}
}

 

 

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
AstroMus
Tourist
5 0 1

@KetanKumar 

 

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

 

Screenshot 2021-02-07 at 15.02.02.png

KetanKumar
Shopify Partner
36839 3635 11972

@AstroMus 

thanks, update 

sorry i can't see this code

 

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
AstroMus
Tourist
5 0 1

@KetanKumar 

I published the code, now you should be able to see it. Thanks

KetanKumar
Shopify Partner
36839 3635 11972

@AstroMus 

thanks i have update my above code can you please copy and past again

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
AstroMus
Tourist
5 0 1

@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! 

 

Screenshot 2021-02-07 at 17.30.22.pngScreenshot 2021-02-07 at 17.31.09.png

AstroMus
Tourist
5 0 1

@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! 

Huedco
Tourist
3 0 3

Hi Kentan, 

 

I am also having this problem but m desktop photos are too big but it looks good on mobile?

KetanKumar
Shopify Partner
36839 3635 11972

@Huedco 


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