Different Image Size on Desktop and Mobile

KetanKumar
Shopify Partner
16890 1844 6315

@WesamS 

yes your image landscape mode 

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
ctucker
Tourist
3 0 2

I am having the same issue. I would like my top & bottom photo to fully show on the mobile version. 

Site: https://elite-champion.myshopify.com/

Code: elitec

KetanKumar
Shopify Partner
16890 1844 6315

@ctucker 

sorry for this issue can you please try this 

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-hero-1 .hero--x-large {
    height: 200px;
    background-size: 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
ctucker
Tourist
3 0 2

It worked for the top picture, but not the bottom one. 

KetanKumar
Shopify Partner
16890 1844 6315

@ctucker 

yes, please add this code 

@media only screen and (max-width: 749px)  {
#shopify-section-hero-2 .hero--medium {
    height: 104px;
    background-size: 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
ctucker
Tourist
3 0 2

@KetanKumar You've been so helpful! Is there a reason it does fit the whole screen width wise. Like it lease space between the pic and edge of screen.

Secondly, on a mobile device can I change the picture in the middle of the single kid to be a tad smaller? It looks huge compared to the other pictures once they fit the screen. 

0 Likes
KetanKumar
Shopify Partner
16890 1844 6315

@ctucker 

it was depending your image size its possible to simple code that way if you need a different image on mobile it can be done some customization 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 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
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
16890 1844 6315

@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 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
Huedco
Tourist
3 0 3

Its huedco.com.au, but now it has gone wierd and says this Invalid CSS after " }": expected "}", was "" at 5989 but there is no 5989 on there?

 

Please help