Image with caption style not working

Sparkling
1

Hi buddy
First, thanks for this super theme

My problem is that
after inserting an image with caption, the style is not the same with Your official demo site.
I mean my Site does not have the rectangle Border effect.

You may see screenshots below and my website
https://xvn.1e2.myftpupload.com/hello/

Screenshot 2024-01-23 170306
Screenshot 2024-01-23 1703061110×643 54.2 KB

Hope for your response.
Thanks. again!

2

Hi there,

@mrgiant can you please point me to the demo page on our website for reference? I’m not sure if I clearly understand your question

Regards

3

Sure, Here it is.@colorlibsupport

Screenshot 2024-01-23 181756
Screenshot 2024-01-23 1817561080×814 64.2 KB

The difference between my site and your demo site is that mine has not that Rectangle border around the image. From the demo site, you may see all images with a caption should have its style with a Rectangle border around it
.
How can I make it the same with the demo site? Thanks’.

4

Hi there,

Thank you so much for these details.

Please add this CSS code in the Appearance > Customize > Additional CSS:

.wp-block-image .aligncenter {
    border: 1px solid #ccc;
    padding: 4px;
}

Regards.

5

Sorry, this way does not work. Still not the same.

First, in this way the caption is still not contained in the border.

Second, all images in demo site have its caption centered no matter the image is set to align center or no alignment and contained within the outside border.

Screenshot 2024-01-24 193607
Screenshot 2024-01-24 1936071006×625 61.7 KB

6

Hi @mrgiant

The issue is that your website does not recognize whether images are captioned or not, which is why it’s not the same. I’m not sure why this is the case. Could you please provide admin details in DM so that I can check the problem?

Regards,

7

Hi @colorlibsupport

I create an admin account for you on my website:

username or email: [email protected]
password: is the same with the email above

You can login with this email/password pair on this page ( Choose [Log in with username and password])
https://xvn.1e2.myftpupload.com/login

The /hello page is for this image test purpose, you can find it on menu:
Home > Hello

Feel free to do anything on this test website.

8

Hey there,

Ok, please check it again,

this is the CSS code I added to your website:

.wp-caption {
border: 1px solid #ccc;
display: table-cell;
}
.wp-caption figure {
margin: 4px !important;
}

and you need to add wp-caption CSS class to the images: Screenshot by Lightshot

Let me know how it goes.

Regards,

9

I was having the same issue with a website and about to create a thread here. But then I thought to find a similar post and find yours so wanted to thank you.
Thumbs up.

10

you are welcome. let me know if you have any other questions

1 Like