HELP! Images changing colour on different screens

[NickatVesta (Nick Wheeler)]

Hi Team

Recently finished off my first website in Webflow which im stoked with however I was just previewing the finished product and noticed that some images were converting to black and white when i moved the webpage from my monitor display to the laptop screen?? Urgent help needed please.

Here is my site Read-Only: Webflow - Vesta 2.0

See screen shot of monitor display and laptop screen side by side.

[Mirko_H (Mirko)]

Hey @NickatVesta you have set the grayscale-filter on the element “image-full-cover” on devices larger then 1920px. Just reset this and you should be fine:

[NickatVesta (Nick Wheeler)]

Awesome thanks so much - the size of the image style seems to shift between devices 1920px and desktop which i cant work out why?

[Mirko_H (Mirko)]

Not sure if I understand what you mean, but currently you have set your image to “object-fit: cover;” but you didn’t define a height or width in the wrapper element (experience-page_hero). If you want control over the size of the image, you can set a height on the wrapper (experience-page_hero). The image should then adjust to the height from the wrapper. For larger screens you currently have set the width and height of the image to “auto”:

You need to reset this and you should also reset the min-width for that screen size. Wouldn’t make a difference, because it’s set to “0”, but you don’t need that style.