Thin line of colour along edge of front page headline image

Did you fix the issue already?
cannot reproduce on:
– Chromium, Firefox, Webkit on Linux
– Firefox, Brave on Android (neither landscape nor portrait)

No, not fixed. They are absolutely still there. Well, glad you don’t see them because it’s a live website but weird – why do I see it?

It is really thin. Like there’s 0.5px border or something. Could you be overlooking it?

When can I post screenshots online for you to view?

Discovered that the thin line disappears if I reduce the window size small enough. I’ve got it open on Chromium in full screen and the graphic has a width of 2545.

If I reduce it to 1300, the line is razor thin.

At 800 wide, it’s gone.

By the way, a line is also visible at the bottom of the image – but it’s the header background color.

the line is part of you image.

use a graphic edit program and zoom in into the edge of the image – you will see it…

nvm,
i thought you were talking about the logo.
The header image has the line on top and also the image color differs from your background.

• This reply was modified 3 years, 7 months ago by Anonymous User 14254218.
• This reply was modified 3 years, 7 months ago by Anonymous User 14254218.
• This reply was modified 3 years, 7 months ago by Anonymous User 14254218.

No sorry, for the misunderstanding. I am talking about the Featured Image.

I don’t know how you guys established that the image contains the line. Just to double check, I opened it up in an editor and zoomed in right down to the pixel level so I could see the pixels along the top edge, and they are all grey. There is no top line of blue-green pixels in the image.

Here is the image URL:

https://carbonwatchdog.org/wp-content/uploads/3baysv9-grey.png

Please double check your findings. If you still mean that the line is in the image, then please explain how it appears in the browser but not GIMP – maybe an artifact of .png format? I have no knowledge of the technical details there.

Thanks.

add this to your additional css and you will see the line turning pink. I did my homework ??

.featured-media-inner {
  background-color:#f0f;
  outline: 10px solid #fff;
}

This indicates that the image does not fully cover the canvas and/or the outer pixels are slightly transparent which allows the background to bleed through. This is most likely a result of the image borders not beeing properly set or due to down-/upscaling during the export. make sure to export graphics in native resolutions and add some bleeding (meaning your graphics should not end at the exact pixel where your canvas ends – this is commonly used in print media).

I shall be educating my graphic designer! This is great, actually, assuming she appreciates the feedback because she’s being doing this pro bono.

Meanwhile I set the background color to #ededed and the line at the top disappears.

Thanks v. much for sorting this out!