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)

KetanKumar
Shopify Partner
36822 3634 11960

Hello, Thanks for post.

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
DaveInvestment
Excursionist
14 0 5

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
Shopify Partner
36822 3634 11960

@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;
}
}
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
DaveInvestment
Excursionist
14 0 5

It worked, thanks!

 

Tecsurfer
Tourist
4 0 1

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

KetanKumar
Shopify Partner
36822 3634 11960

Hello, @Tecsurfer 

Welcome to the Shopify community!
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
rfulchi2
Visitor
2 0 1

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

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 

Capture7.PNG

147572271_433178421362173_696182394036286984_n.jpg

KetanKumar
Shopify Partner
36822 3634 11960

@BrockA 

Thanks for post

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

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
Tmcmillen02
New Member
4 0 0

any help would be appreciated.

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

 

https://american-bluecollar.com

HighGirlJewelry
Tourist
6 0 1

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
Shopify Partner
36822 3634 11960

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

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

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 helpScreenshot (30).png

Maguire1980
Visitor
2 0 1

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
Shopify Partner
1106 101 225

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

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
Shopify Partner
1106 101 225

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

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
Tourist
8 0 0

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
Shopify Partner
36822 3634 11960

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

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
Anna123
Tourist
8 0 0

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.pngincorrect MB banner ratio.png

KetanKumar
Shopify Partner
36822 3634 11960

@Anna123 

Thanks for details

can you please check your theme setting 

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
Anna123
Tourist
8 0 0

Could you please tell what and where to check exactly?

KetanKumar
Shopify Partner
36822 3634 11960

@Anna123 

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

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
Anna123
Tourist
8 0 0

@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
Shopify Partner
36822 3634 11960

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?
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
Anna123
Tourist
8 0 0

@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
Shopify Partner
36822 3634 11960

@Anna123 

Thanks can you please provide current view store url so i will compare both are store 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
Anna123
Tourist
8 0 0

@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
Shopify Partner
36822 3634 11960

@Anna123 

Thanks for details 

i have done this, please check,

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
Anna123
Tourist
8 0 0

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
Shopify Partner
36822 3634 11960

@Anna123 

Thanks for your compliment.

hero section one code missing so i will 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
emceecruz
Tourist
5 0 3

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
Shopify Partner
36822 3634 11960

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

 

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
emceecruz
Tourist
5 0 3

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

KetanKumar
Shopify Partner
36822 3634 11960

@emceecruz 

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

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
emceecruz
Tourist
5 0 3

All of my pictures on slideshows are all squares. 

KetanKumar
Shopify Partner
36822 3634 11960

@emceecruz 

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

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
emceecruz
Tourist
5 0 3

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

KetanKumar
Shopify Partner
36822 3634 11960

yes

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
emceecruz
Tourist
5 0 3

Okay thank you so much!

KetanKumar
Shopify Partner
36822 3634 11960

@emceecruz 

Thanks for the update and support.

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
Saurya
Excursionist
62 0 4

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

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
Shopify Partner
36822 3634 11960

@Saurya 

can you please share issue screenshot

 

@Blisstique 

do you mean this?

KetanKumar_0-1605687388925.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
Saurya
Excursionist
62 0 4

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.

Saurya_1-1605689660544.png

 

 

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
Shopify Partner
36822 3634 11960

@Saurya 

Yes can you please upload mobile image much better for 

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
Saurya
Excursionist
62 0 4

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