Image border is shown offset

Hello! I have the problem that two images’ lower border is shown offset.

Both pictures are set to 12 rem both in height and width. If I set the height to auto, the problem disappears.

What can I do to keep the picture square?

Many thanks in advance!

Hi Dennis,

Thank you for writing in, can you share with us the direct page URL where you take your screenshot so we can take a closer look. And can you confirm that, that is a border and not a box-shadow?

Cheers,

Sure, you’ll find the URL in the secure note. It’s definitely a border.

Hello @mrdplusd,

It seems that you have set the height of the image container and IMG tag as well just because the bottom border is been hidden. I would suggest you remove the custom CSS code or Image element height or you can use this CSS code under X/Pro —>Theme Option—>CSS

.e16-9.x-image img {
    height: 12rem !important;
}

In case if it doesn’t work for you please share your details in a secure note. Please provide the following details

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

Unfortunately, your solution didn’t work. I actually only adjusted the height and width of the image in the inspector. I didn’t use any additional CSS code. You can find the credentials in the secure note. Many Thanks!

Hey @mrdplusd,

We’re very sorry for the confusion and the wrong suggestion.

It looks like you want to show part of the image only and your current Image element configuration should do that only that the image overflow should be hidden and there is no setting for that so I’ll get clarification with our development team for this.

For now, the trick to compensate for the hidden border is to use the Box Shadow option. Regretfully though, the Box Shadow would be a sacrificial option as it would act as a bottom border rather than being a “shadow”. The Box Shadow setup would be all 0 except for the Y Offset which should be double than border size value.

image

Hope that helps.

Okay, thanks for the workaround. That helped at first, but it caused problems again during mobile optimization. I’ve now cropped the images to a square and uploaded them again. Now it works fine.

Hi @mrdplusd,

Glad that it is working fine.

Thanks

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