Different Image Size on Desktop and Mobile

KetanKumar
Shopify Partner
17381 1875 6489

@Huedco 

can you please try this code

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

.hero .hero__image {object-fit: contain;}

 

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
natalieWNDRLND
Tourist
5 0 1

hi, i am struggling with this too.

I have an image as the banner which fits perfect on the desktop version, however when I go to view via mobile it cuts off most of the image.

My website isn't live yet so i'm not sure if I can post a link!

I am also rubbish with changing codes etc. last time i did, I ruined my whole website and had to delete the whole thing to start again!

 

thanks,

 

natalie 

0 Likes
lvnt_aaa
New Member
1 0 1

Hello, whnever i use the image with text overlay or slideshow, the image gets cropped so not everything is displayed. Also if an image with text overlay or slideshow is good on desktop, on mobile is zoomed in a lot. How can i have an image look the whole size and same quality on both desktop and mobile.

 store: 

www.koskins.com

 adress:

skinroutinelondon.myshopify.com

KetanKumar
Shopify Partner
17381 1875 6489

@lvnt_aaa 

can you please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

@media only screen and (max-width: 749px) {
#shopify-section-16173671534d898061 .hero--small {
    height: 200px;
}
}

 

@natalieWNDRLND 

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
natalieWNDRLND
Tourist
5 0 1

thank you!

it's www.wndrlnd.uk 

password: prieck

KetanKumar
Shopify Partner
17381 1875 6489

@natalieWNDRLND 

your mobile banner to smaller 

KetanKumar_0-1619095807135.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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
natalieWNDRLND
Tourist
5 0 1

any ideas how to change that? it's the perfect size on the desktop!

0 Likes
KetanKumar
Shopify Partner
17381 1875 6489

@natalieWNDRLND 

can you please try this 1920x768 may its work 

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
natalieWNDRLND
Tourist
5 0 1

is this the size of the photo i should use?

0 Likes
KetanKumar
Shopify Partner
17381 1875 6489

@natalieWNDRLND 

yes, please 

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes