Odd issue of pink border that appears (inconsistent) around featured images

Support
#1

Hoping someone can help with this odd issue:
Around some of my featured images, a pink line / border sometimes appears, typically on the left side, or occasionally underneath as well. Can someone please help me figure out what the issue is with my theme / CSS to prevent this problem?

It seems to happen primarily on the main blog page of my site: https://punitarice.com/blog

I’m also including some images that show the pink line either on the side and bottom of a featured image, or just on the side of the featured image.
Thanks in advance if anyone is able to help me figure this out and resolve.

#2

Hi there,

It’s the background color, and it’s appearing as the image resize. Please try adding this CSS too your global custom CSS.

.entry-thumb img {
    width: 100%;
}

I can only reproduce in specific width, what I’m not sure is how to reproduce your first screenshot, does that mean it appears in a whole page? Or is it just an image too?

Thanks!

#3

Thank you so much – that actually did the trick on page load, BUT, now when the mouse hovers over a featured image the same line appears a bit.
It’s easiest to see on the first post on this page: https://punitarice.com/blog/page/3/
Any idea how to get the line to disappear on hover as well?

#4

Hello There,

Thanks for updating in! To resolve your issue, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.entry-wrap .entry-thumb img,
.entry-wrap .entry-thumb:hover img {
    opacity: 1 !important;
}

We would loved to know if this has work for you. Thank you.

#5

Hmm. That DID take care of the thin pink line issue entirely! Unfortunately, it created a new issue: Now, the lovely sheer pink cast that would appear over images on hover (which was a desired effect) is gone. I can live without it if there’s no clean way to resolve this issue, but I did like how it looked. I just didn’t want the line. If you can help further, great. :slight_smile:

#6

Hello There,

Could you remove this code:

.entry-wrap .entry-thumb img,
.entry-wrap .entry-thumb:hover img {
    opacity: 1 !important;
}

And replace it with this:

.entry-wrap .entry-thumb,
.entry-wrap .entry-thumb:hover {
  outline: none;
  text-decoration: none;
}

We would loved to know if this has work for you. Thank you.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.