Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: How to resize collection header images for mobile only

Solved

How to resize collection header images for mobile only

KAillustration
Shopify Partner
18 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
1288 145 166

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

Free Shopify Beginner Tutorial

View solution in original post

websensepro
Shopify Partner
1288 145 166

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

Free Shopify Beginner Tutorial

View solution in original post

Replies 15 (15)

Moeed
Shopify Partner
6336 1718 2073

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

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


KAillustration
Shopify Partner
18 0 3
Moeed
Shopify Partner
6336 1718 2073

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

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


KAillustration
Shopify Partner
18 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
18 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
1288 145 166

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

Free Shopify Beginner Tutorial
KAillustration
Shopify Partner
18 0 3

Thank you!!! that is perfect

KAillustration
Shopify Partner
18 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
1288 145 166

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

Free Shopify Beginner Tutorial
KAillustration
Shopify Partner
18 0 3

Screenshot 2023-07-27 at 14.40.20.png

websensepro
Shopify Partner
1288 145 166

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

Free Shopify Beginner Tutorial
KAillustration
Shopify Partner
18 0 3

thank you! thats amazing!

KAillustration
Shopify Partner
18 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
18 0 3

I have managed to fix this

KAillustration
Shopify Partner
18 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