[Support request] Border in Image

[Sanu Kumar]

Can you see the border difference between both images 1 and 2. These two images are on my two different sites

Image 1: https://ibb.co/QbMJjs1 ; Site URL: https://www.masteryblogging.com/wp-rocket-black-friday-sale/
Image 2: https://ibb.co/rcw0Y4w ; Site URL: https://www.blackfriday.masteryblogging.com/wp-rocket-black-friday-deal/

I am using same code to add a border on images but my Image 2 is looking good with the border but my Image 1 is not looking good with border. If you have kept close attention it is having a margin between border and images. How to fix this issue on Image 1.

[David]

Hi there,

those sites have different CSS.
Site 1 uses:

.page-header-image-single {
    box-shadow: 0 10px 30px 0 rgba(0,0,0,0.3);
}

Site 2 uses:

.page-header-image-single {
    border: 4px solid #cccccc;
}

[Sanu Kumar]

Still it shows same as show in the screenshot.

I have added this CSS now

.entry-content img {
border: 4px solid #cccccc;
	box-shadow: 0 10px 30px 0 rgba(0,0,0,0.3);
}

[David]

Where did you add that CSS as i cannot see it on the site, only the old CSS?

[Sanu Kumar]

Ah, I didn’t save.
Now I did, please check again.

Here is the link for site 1: https://www.masteryblogging.com/wp-rocket-black-friday-sale/
URL for site 2: https://www.blackfriday.masteryblogging.com/wp-rocket-black-friday-deal/

I have added same CSS on both sites but on-site 2, the border is looking good but in site 1, the border is having a gap (small white margin on the top, bottom and left but not in the right) please check it on the site 1 for clarity.

[Elvin]

Hi,

I have added same CSS on both sites but on-site 2, the border is looking good but in site 1, the border is having a gap (small white margin on the top, bottom and left but not in the right) please check it on the site 1 for clarity.

Can you provide us screenshots of this issue? I can’t seem to see it on my end.

Here’s what I see from your site 1 link: https://share.getcloudapp.com/12urZovR

Perhaps you’ve fixed this already?

[Sanu Kumar]

From my end I can see this:
Here’s the screenshot from both sites.

Site 2: https://ibb.co/TmQG4Qv
Site 1: https://ibb.co/xsYs9Cz

It still has same issue I am facing

[David]

Not seeing this on my browsers either, which points to the device it is being viewed on.

You can try updating the CSS to this:

.entry-content img {
    border: 4px solid #cccccc;
    box-shadow: 0 10px 30px 0 rgba(0,0,0,0.3);
    vertical-align: bottom;
    font-size: 0;
    line-height: 0;
}

This removes any style attributes on the image that could affect its display. But as i said we’re not seeing the issue.

[Author]

Posts