# Image with caption style not working

**URL:** <https://colorlibsupport.com/t/image-with-caption-style-not-working/36281>\
**Category:** Sparkling\
**Created:** [January 23, 2024, 9:13am UTC](https://colorlibsupport.com/t/image-with-caption-style-not-working/36281 "2024-01-23T09:13:21Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![mrgiant](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/ccd318/32.png) [@mrgiant](https://colorlibsupport.com/u/mrgiant)\
**Post date:** [January 23, 2024, 9:13am UTC](https://colorlibsupport.com/t/image-with-caption-style-not-working/36281/1 "2024-01-23T09:13:21Z")

</div>

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/](https://xvn.1e2.myftpupload.com/hello/)

 ![Screenshot 2024-01-23 170306](https://colorlibsupport.com/uploads/default/original/2X/6/646036e257ebcec861dc905aab8c8acc621e8a54.png)

Hope for your response.  
Thanks. again!

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [January 23, 2024, 9:40am UTC](https://colorlibsupport.com/t/image-with-caption-style-not-working/36281/2 "2024-01-23T09:40:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mrgiant](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/ccd318/32.png) [@mrgiant](https://colorlibsupport.com/u/mrgiant)\
**Post date:** [January 23, 2024, 10:15am UTC](https://colorlibsupport.com/t/image-with-caption-style-not-working/36281/3 "2024-01-23T10:15:02Z")

</div>

Sure, Here it is.@colorlibsupport

[https://colorlibhub.com/sparkling/about/page-image-alignment/](https://colorlibhub.com/sparkling/about/page-image-alignment/)

 ![Screenshot 2024-01-23 181756](https://colorlibsupport.com/uploads/default/original/2X/5/5849bce849f49bb17c2164a357605a2e242e9007.png)

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’.

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [January 24, 2024, 11:20am UTC](https://colorlibsupport.com/t/image-with-caption-style-not-working/36281/4 "2024-01-24T11:20:22Z")

</div>

Hi there,

Thank you so much for these details.

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

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

```

Regards.

---

<div class="post-metadata">

**Author:** ![mrgiant](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/ccd318/32.png) [@mrgiant](https://colorlibsupport.com/u/mrgiant)\
**Post date:** [January 24, 2024, 11:29am UTC](https://colorlibsupport.com/t/image-with-caption-style-not-working/36281/5 "2024-01-24T11:29:16Z")

</div>

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](https://colorlibsupport.com/uploads/default/original/2X/8/8021708c59e6e8efb913b8c03c7be48710b9c8ea.png)

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [January 25, 2024, 8:43am UTC](https://colorlibsupport.com/t/image-with-caption-style-not-working/36281/6 "2024-01-25T08:43:40Z")

</div>

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,

---

<div class="post-metadata">

**Author:** ![mrgiant](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/ccd318/32.png) [@mrgiant](https://colorlibsupport.com/u/mrgiant)\
**Post date:** [January 29, 2024, 1:31am UTC](https://colorlibsupport.com/t/image-with-caption-style-not-working/36281/7 "2024-01-29T01:31:11Z")

</div>

Hi @colorlibsupport

I create an admin account for you on my website:

username or email: [colorlib@abc.com](mailto:colorlib@abc.com)  
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](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.

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [January 29, 2024, 11:50am UTC](https://colorlibsupport.com/t/image-with-caption-style-not-working/36281/8 "2024-01-29T11:50:08Z")

</div>

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](https://prnt.sc/BbLxkLBhl5Wj)

Let me know how it goes.

Regards,

---

<div class="post-metadata">

**Author:** ![oliviaemma](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/o/ce73a5/32.png) [@oliviaemma](https://colorlibsupport.com/u/oliviaemma)\
**Post date:** [August 22, 2024, 5:07am UTC](https://colorlibsupport.com/t/image-with-caption-style-not-working/36281/9 "2024-08-22T05:07:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [August 23, 2024, 6:23am UTC](https://colorlibsupport.com/t/image-with-caption-style-not-working/36281/10 "2024-08-23T06:23:08Z")

</div>

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