Caption in Photos

technova76

Hello

I have problem with caption in photos again.
In an article, I upload the photo at 820px width, I add the caption, but the caption has 1140px width and the photo adapts to this dimension (1140).

The article is this:

https://piggybankaction.org/action/index.php/blog/14-environment/26-environmental-problems.html

saguaros

Hi technova76

I added this custom css on your site:

@media (min-width: 992px) {
.t3-content.col-xs-12 .item-page figure img {
    width: auto !important;
    margin-bottom: 10px;
}

.t3-content.col-xs-12 .item-page figure {
    text-align: -webkit-center;
    text-align: -moz-center;
}
}
}

technova76

Thank you very much.
I removed the old one you gave me to add in the custom.css file.

But I see the gray box in the caption still has a large width, and there is no space between the caption and the text (under it).

saguaros

technova76

Kindly check what I suggested for adding margin for the caption in other post, our support scope is helping you to setup your site align our demo site, we can't help you much customization like this.

technova76

In which post you mention it?
Can you tell me again?

What about the gray box I show you in the image? It should be parallel with the photo & text.

saguaros

technova76

You have so many post for this kind of customization, you can check it again.

What I suggested is that you can use Inspect Element on your browser, right click on the element you want to style like the figure tag of caption in this case: https://prnt.sc/sjh007

Then you can add the margin-bottom as you wish and put into the custom.css file.

technova76

I don't understand which code I have to find. I see different things than you show me in the image.

Can you add the right code for the width of the caption box in custom.css, or give it to me to add it?

saguaros

technova76

Kindly use Inspect Element and check again my suggested code above.

technova76

Why don't you do it? For you is easy. You know how to do it...

I have already try it and I can't.

saguaros

technova76

In custom.css file, add the padding like below:

.t3-content.col-xs-12 .item-page figure {
    text-align: -webkit-center;
    text-align: -moz-center;
		padding: 0 160px;
}

This is basic knowledge in css, if you want to customize your site, it's better to know some basic thing about it. It will save lots of time.

technova76

Now is the correct code!

You forgot to add the "padding: 0 160px;" in the preview code you gave me. 🙂
That's why it was creating this error.

Thank you.