Adjusting desktop collection image to fit mobile screen automatically.

nostalgiaLTD
Tourist
5 0 4

I am using the DEBUT theme. I am trying to get the desktop default collection photo to fit/display correctly automatically on the mobile version of my site. I have tried other solutions for this problem, but cant get them to work.

The link to the page is https://nostalgia.ltd/collections/vintage-rap-t-shirt

Any help is SO much appreciated.

Best.

Replies 30 (30)

KetanKumar
Shopify Partner
36839 3635 11972

Hello, @nostalgiaLTD 

Thanks 

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 (max-width: 749px) {
.collection-hero__image {
    height: auto;
    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 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
daliasabet
Visitor
1 0 1

thank you! it worked

 

KetanKumar
Shopify Partner
36839 3635 11972

@daliasabet 

thanks for update 

it's my pleasure to help us

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
SplashedByPinkz
Tourist
5 0 4

Hello can you help me adjust my Shopify desktop theme to fit mobile view as well?

 

KetanKumar
Shopify Partner
36839 3635 11972

@SplashedByPinkz 

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 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
SplashedByPinkz
Tourist
5 0 4
KetanKumar
Shopify Partner
36839 3635 11972

@SplashedByPinkz 

yes please try 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-hero-1 .hero--large {
    height: 190px;
}
}

 

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
SplashedByPinkz
Tourist
5 0 4

Wait so it only work 5secs 

SplashedByPinkz
Tourist
5 0 4

it worked for the top image not the bottom

KetanKumar
Shopify Partner
36839 3635 11972

@SplashedByPinkz 

yes please try this code

@media only screen and (max-width: 749px) {
#shopify-section-hero-2 .hero--large {
    height: 200px;
}
}
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
SplashedByPinkz
Tourist
5 0 4

thank you so muchhhhh

 

KetanKumar
Shopify Partner
36839 3635 11972

@SplashedByPinkz 

it my pleasure to help us

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

Can you do my site as well? 

beyondpets
Tourist
6 0 1

Hello I am having the same issue, can I please have some help? I am wanting my desktop to match mobile. I am using the berlin theme. 

 

https://www.baark.co.nz/

VicR
New Member
5 0 0

I’m in need of some help as well. Unable to get the collection images to resize automatically in mobile view. Here is a link to one of the images on mobile view. https://1982candleco.com/collections/the-midnight-collection

Shakuri
Visitor
1 0 0

Hello! I need help on this same thing. Did you mean theme.scss.liquid? You just put "theme.css.liquid" Are these two different assets? Please Help. Thank you so much

GeekChef
Visitor
1 0 0

Hi I’m having the same issue but I don’t have that code file in mine, I have theme-editor.js under assets, there is no theme.cas.liquid file. Should I still add this code under theme-editor.js? 

Cactuswild18
Visitor
2 0 1

Hi KetanKumar,

can you please help me!

 

My pictures won’t fit between desktop and mobile 😞 

Cactus Wildflower Boutique 

 

KetanKumar
Shopify Partner
36839 3635 11972

@Cactuswild18 

yes, please share store url

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

I am very new to shopify and my website is not yet active.

does that matter? 

 

KetanKumar
Shopify Partner
36839 3635 11972

@Cactuswild18 

oh sorry so can i check issue and let you 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
jmoney1234
Visitor
2 0 0

Hi my mobile image gets cut out on the width. Could you please assist on the image not getting cut off? My website link is https://anciennechains.com

by1006
Visitor
1 0 0

Hi Kumar, my websiste is www.joyfitrefresh.com

Password is : mandapp 

I try to adjust the banner image to fit in to mobile size, what can I do ? thank you

S-laser
Visitor
1 0 0

I am using the REFRESH theme. However, the images on the computer side are always not displayed properly on the mobile side, how can I adjust it?

The link to the page is: https://srwor.com/

Any help is greatly appreciated.

Thanks.

SHOPGRACE
Tourist
3 0 2

Hello @KetanKumar

 

Can you please assist me. I can't seem to figure it out. 

 

www.shopgrace-boutique.com

password: ShopGrace

 

The image says *Fee Bottle on Orders Over $65. 

 

Thank you!

 

KetanKumar
Shopify Partner
36839 3635 11972

@SHOPGRACE 

possible this look at mobile please confirm 

KetanKumar_0-1637124129495.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
SHOPGRACE
Tourist
3 0 2

@KetanKumar 

Yes that is the image I'm having trouble with. I see that in the mobile version it might not look good. 

 

What do yo recommend? 

 

Should I just paste that code to make it look the way you made it or is there another solution? 

KetanKumar
Shopify Partner
36839 3635 11972

@SHOPGRACE 

yes please change 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
arbeygp
Explorer
52 0 11

Hi @KetanKumar 

 

Can you please help me,

 

This is my site: https://eltemplodelamoda.com/

 

I can´t adjust the size image of the collections on mobile and pc, 

 

What do you recommend ?

 

Thanks a lot

funkybirdieambe
Shopify Partner
1 0 0

Hi @KetanKumar

Can you please help me as well? 

 

My pictures aren't fitting right between desktop and mobile. 

https://funkybirdieamber.myshopify.com/collections/adult-anklets