Solved

How to resize collection header images for mobile only

KAillustration
Shopify Partner
16 0 3

Hi, can anyone help me? I have my collection header images set to medium and on my desktop site they look great. However they are too close up on the mobile version. Is it possible to change just the size of the mobile version? I would like the image to fit the width of the screen.

 

Thanks,

 

Kat

Accepted Solutions (2)
websensepro
Shopify Partner
1047 146 152

This is an accepted solution.

Hi, @KAillustration.

 

You can try this code: it will be helpful to you

Go to the online store theme and go to base.css file paste the code mentiond below.

 

@media (max-width: 767px) {

.animate--fixed>img:not(.zoom):not(.deferred-media__poster-button) {
    height: 60vh;
    margin-top: 0px;
    position: relative
}

}

 

Result:

websensepro_0-1690463857513.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

View solution in original post

websensepro
Shopify Partner
1047 146 152

This is an accepted solution.

your are add media querry,

 

@media (max-width: 767px) {

.animate--fixed>img:not(.zoom):not(.deferred-media__poster-button) {
    height: 60vh;
    margin-top: 0px;
    position: relative
}

}

 

Like This:

websensepro_0-1690465413253.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

View solution in original post

Replies 15 (15)

Moeed
Shopify Partner
3858 974 1216

Hey @KAillustration 
Kindly share your Store URL and Password if enabled

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
KAillustration
Shopify Partner
16 0 3
Moeed
Shopify Partner
3858 974 1216

Hey @KAillustration 
Can you please show a screenshot of what you're referring to?

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
KAillustration
Shopify Partner
16 0 3

Screenshot 2023-07-27 at 13.58.55.pngIMG_3431.PNG

The top one ( desktop) is good but the bottom one (mobile) is too close up you cant see the products

KAillustration
Shopify Partner
16 0 3

On my desktop site they look great. However they are too close up on the mobile version. Is it possible to change just the size of the mobile version? I would like the image to fit the width of the screen.

websensepro
Shopify Partner
1047 146 152

This is an accepted solution.

Hi, @KAillustration.

 

You can try this code: it will be helpful to you

Go to the online store theme and go to base.css file paste the code mentiond below.

 

@media (max-width: 767px) {

.animate--fixed>img:not(.zoom):not(.deferred-media__poster-button) {
    height: 60vh;
    margin-top: 0px;
    position: relative
}

}

 

Result:

websensepro_0-1690463857513.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
KAillustration
Shopify Partner
16 0 3

Thank you!!! that is perfect

KAillustration
Shopify Partner
16 0 3

It is great on mobile but has now edited the desktop image as well. It has created a greyed out area on the image. Do you have a solution for removing that?

Screenshot 2023-07-27 at 14.25.22.png

websensepro
Shopify Partner
1047 146 152

please send me your css file screenshot,

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
KAillustration
Shopify Partner
16 0 3

Screenshot 2023-07-27 at 14.40.20.png

websensepro
Shopify Partner
1047 146 152

This is an accepted solution.

your are add media querry,

 

@media (max-width: 767px) {

.animate--fixed>img:not(.zoom):not(.deferred-media__poster-button) {
    height: 60vh;
    margin-top: 0px;
    position: relative
}

}

 

Like This:

websensepro_0-1690465413253.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
KAillustration
Shopify Partner
16 0 3

thank you! thats amazing!

KAillustration
Shopify Partner
16 0 3

hi, the code is visible at the bottom of my screen for some reason. Do you know how to hide it? Screenshot 2023-07-27 at 20.38.50.png

KAillustration
Shopify Partner
16 0 3

I have managed to fix this

KAillustration
Shopify Partner
16 0 3

Is there a way to edit this code so it doesn't override the animation setting? I have it set to 'fixed background position" but that is no longer working since adding this code