Different Image Size on Desktop and Mobile

[DaveInvestment]

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

[KetanKumar]

Hello, Thanks for post.

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

[DaveInvestment]

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.

[KetanKumar]

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

[DaveInvestment]

It worked, thanks!

[Tecsurfer]

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

[KetanKumar]

Hello, @Tecsurfer 

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

[rfulchi2]

Hi, not sure why it isn't working on my site either? On web the slideshow images are perfectly sized but when on mobile it's too small. Please help if you can - URL link below

www.pupvio.com

[BrockA]

Hello @KetanKumar 

I'm hoping you can help me with a similar issue that I'm having. When looking at my photos on my mobile phone they are sized correctly, although when looking at my website on a computer the photos are chopped in half.

My website is badarm.com.au

Would you be able to have a look and see if you notice something incorrect in my code?

I've attached two photos so you can see the difference. 

Regards

Brock 

 

 

[KetanKumar]

@BrockA 

Thanks for post

can you please check theme setting may also if not let me know 

[Tmcmillen02]

any help would be appreciated.

My banner cuts off on mobile devices, how do I fix?

https://american-bluecollar.com

[HighGirlJewelry]

Can you help me also? my slideshow image on the theme "Brooklyn" is a perfect fit on mobile but too big for the desktop mode.  my website is highgirljewelry.myshopify.com

[KetanKumar]

@HighGirlJewelry 

Sorry for facing this issue, it's my pleasure to help us.

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.

[HighGirlJewelry]

my add to cart button only appears when you either click on it or go over it with the mouse. its almost as its disappeared. please help

[Maguire1980]

Hello, can you help with my mobile front page? Image size perfect on computer but too large for mobile. It’s the debut theme. My website is magicalrainbowfabrics.com

Thank you 

[UmairA]

Hey there @Maguire1980,

You didn't mention what you want to achieve exactly? To reduce height or width? Also, your image dimensions are also negatively contributing to the mobile view.

Anyways, adding the following code to your theme.css file can fit perfectly but will reduce height.

#Hero-hero-1 {
height: unset !important;
}

Don't forget to let me know if it fixes your issue.

[Maguire1980]

Thanks, appended that on to the end of the file but unfortunately it hasn't worked. I have tried to resize this image but still coming up with this problem. I need the width to be resized smaller for it to work on the mobile version.

[UmairA]

Hey there @HighGirlJewelry,

Your store is password protected. I can't help unless I see the store first. 

Hope you achieve your goals. Good day!

[Bobbo]

hello,

I would like to have an image with an higher height on mobile as it's very small when the image is seen in mobile. 

The store is www.threeface.it, the image I would like to edit is the first banner on the top and the other big image on the middle. The 2 images with text-overlay. I  cannot where I can edit the media file to edit the height of this 2 sections.

Can you please give me a tips? 

Thanks

Roberto

[Anna123]

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.

[KetanKumar]

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

[Anna123]

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.

[KetanKumar]

@Anna123 

Thanks for details

can you please check your theme setting 

[Anna123]

Could you please tell what and where to check exactly?

[KetanKumar]

@Anna123 

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

[Anna123]

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

[KetanKumar]

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?

[Anna123]

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

[KetanKumar]

@Anna123 

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

[Anna123]

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

[KetanKumar]

@Anna123 

Thanks for details 

i have done this, please check,

[Anna123]

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.

[KetanKumar]

@Anna123 

Thanks for your compliment.

hero section one code missing so i will update.

[emceecruz]

Hi! I'm also having the same problem. Pictures on mobile are fine but on desktop, they are cropped. My store's URL is https://glamlux-shop.myshopify.com/ the visitor's password is drahnu

I hope you can help me! Thank you in advance!

[KetanKumar]

@emceecruz 

Thank can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css.liquid->paste below code at the bottom of the file.

@media only screen and (min-width: 750px) {
.hero--adapt, .hero-fixed-width__image {
    max-height: 100%;
}
}

[emceecruz]

Hi! Thank you so much! But for the slideshows, they're still zoomed in?

[KetanKumar]

@emceecruz 

Thanks can you please upload horizontal| size image it's best 

[emceecruz]

All of my pictures on slideshows are all squares. 

[KetanKumar]

@emceecruz 

Yes, i know that if squares so reduce banner image size 

[emceecruz]

Okay so its better if the size of my pictures are not squares?

[KetanKumar]

yes

[emceecruz]

Okay thank you so much!

[KetanKumar]

@emceecruz 

Thanks for the update and support.

[Saurya]

Hi @KetanKumar 

On debut theme I need to increase the height of the cover slider image without affecting the output on desktop. can you help me out?

Website: https://mevicollection.com/

I'm okay if the image is getting cropped from left and right side on mobile (Width need to be cropped & height needs to be increased) Unable to get the output from shared codes.

[Saurya]

@KetanKumar ???

[Blisstique]

Hi there! I am having the same problem as some others. My website header looks great on a desktop but on a mobile device the header is too wide so it is cute off on each end? How can I get the header to resize for mobile devices?

url: shopblisstique.com

[KetanKumar]

@Saurya 

can you please share issue screenshot

@Blisstique 

do you mean this?

[Saurya]

Hi @KetanKumar ,

Thanks for replying.

Below is the screenshot, yellow mark is the actual image shown on desktop with full width & height.

Same is displayed on the mobile, with full width & height.

What I'm looking is at: Red mark.

On desktop the image should be in full width & height but on mobile "I need to show only the red mark space of the image, I don't want to show the full image. Just want to showcase the center part of image on mobile viewports"

The above shared image is from website homepage slideshow, I've disabled the buttons on slideshow.

[KetanKumar]

@Saurya 

Yes can you please upload mobile image much better for 

[Saurya]

@KetanKumar ?? Not sure what you meant.

The earlier screenshot that I shared, it was taken through chrome inspect element device preview.

Here is the live website link, removed password:

https://mevicollection.com/

On desktop the cover image is perfect,

But on Mobile Device I need to crop the cover image slideshow in width & increase the height of the image. 

The output that @Blisstique's website has on desktop and mobile is what I'm looking to implement (Check this from inspect element on mobile resolution): https://shopblisstique.com/ (The text is getting cropped in width & height is increasing.) of slideshow cover image.