Different Image Size on Desktop and Mobile

Store Design
1

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

1 Like
2

Hello, Thanks for post.

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

1 Like
3

For example the small slideshow on the homepage is not as I want it to be on the mobile version.

And also if I add Images on the page “Für Unternehmen”, I want them to be the same proportions mobile and desktop.

Thank you.

https://novasopener.com

PW: Timon

Thank you.

4

@DaveInvestment

Thanks for URL.

  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) {
.hero-mobile-xlarge {
    min-height: 100%;
    height: 300px;
}
}
3 Likes
5

It worked, thanks!

6

Needing help with my store. I want the image on my desktop homepage to show up as vertical and not horizontally.

1 Like
7

Hello, @Tecsurfer

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

8

Hi, Not sure why it does not quite work on my site. I think banner ratio on mobile looks the same as the one on PC. Could you please kindly help me check? www.simplie.net. Thanks in advance for your help. Anna.

9

@Anna123

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

can you please provide screen short which section do you have a facing issue.

1 Like
10

Hi @KetanKumar glad to receive your reply. Please check the attached two screen shots. They are banners on home page seen from mobile. The one for SMART HULA HOOP is correct. Its size or ratio looks good. But the other is incorrect. Actually I used the same code for both stores and they are both Debut theme. So I don’t understand where the mistake lies. Looking forward to your help. Thank you.

correct MB banner ratio in my another store.png
correct MB banner ratio in my another store.png517Ă—347 94.2 KB

incorrect MB banner ratio.png
incorrect MB banner ratio.png630Ă—294 56.1 KB

11

@Anna123

Thanks for details

can you please check your theme setting

1 Like
12

Could you please tell what and where to check exactly?

13

@Anna123

yes, can you please compare slideshow section setting both are theme

1 Like
14

@KetanKumar Hi, I checked, yes they are the same. Just default debut theme originally. I did not change anything in this section. Could you please enter my store to help me check?

15

if possible

I need your store login details. Yes, I know your login details are confidential. For this second option, I have added your store to my Shopify partner account so I will check your code easily and manage what you think about it?
1 Like
16

@KetanKumar Hi, I just sent an login invitation link to your email bamaniyaketan.sky@gmail.com. Please check it and login there. Anything else required on my end, feel free to let me know. Thanks in advance for your help.

17

@Anna123

Thanks can you please provide current view store url so i will compare both are store code

1 Like
18

@KetanKumar

It is simplie.net. The other store whose mobile banner looks good has not been published yet. Its link is https://smart-hula-hoop.myshopify.com/ Password for visitors is owhood. Thanks.

19

@Anna123

Thanks for details

i have done this, please check,

1 Like
20

Yes, it is perfect now. Thank you so much. Could you please tell me how you did it? Because I really can not understand why I used the same code for the same theme, but just does not work here.