Make Captions Same Width as Images

Can you post your website? At the moment we can’t tell if we can or cannot change the caption size since it all depends on the theme that you are using.

Add an extra container that resizes to the width of the image inside the other container, place your caption box inside the container that keeps the image width.

Hi Tim,

Sure – here is an example.

None of the captions here are too long, but if you edit the code using the inspector and extend the caption you should see the caption box become too wide.

Hi Martin,

Do you know how I would go about doing this? I don’t see how I can make this extra container be added automatically when inserting a caption?

Add this to your CSS:

div.wp-caption{
    word-wrap: normal;
    white-space:normal;
}

That should make your caption text wrap to the next line. I don’t see it doing what you said on my side though, it wraps quite elegantly.

Ok wait I see it, on the images at the bottom, the trick is to get the container to not exceed the width of the image more than the padding on the image.

Looking for a solution for you.

Hi Martin,

Thanks for the suggestion. I tried this and it made no difference unfortunately.

This is what I mean by the caption box expanding with large captions and images that aren’t 100% width of the container. Take a look at this screenshot.

Ok this will work, firstly:

div.wp-caption {
    position: relative;
}

We are going to give the caption an absolute value so that it does not affect the surrounding div, Once we have that we will style the caption p tag to look like the surrounding div:

.wp-caption-text{
    position: absolute;
    background: rgb(243, 243, 243) none repeat scroll 0% 0%;
    left: -1px;
    right: -1px;
    padding: 3px;
    border: 1px solid rgb(221, 221, 221);
    bottom: -20px;
    border-radius: 0px 0px 3px 3px;
}

Hi Martin,

Fantastic – thank you. That seems to have sorted it.

There’s one thing though – this code adjustment removes the gap between two images.
What do I need to adjust to bring the gap back? See this screenshot.

Thanks!

in .wp-caption-text change bottom:-20px to bottom:0; – the caption is now on top of the image. Unfortunately absolute positioning does not affect relative styles – the only other way for this to work is to use JavaScript to match the classes, not my specialty ??