wp-caption mis-aligns on full-width images

…or can I edit my large / full-width image to re-size to 430px and not 440px in width, that would be a solution without having to edit wp-caption? its a small number of pixels that are causing this mis-alignment and i don’t want to remove wp-caption.

Looks like maybe the padding you want to remove is here:

.wp-caption img {
    border: 0 none;
    margin: 0;
    padding: 0 5px;
}

(But I’m not exactly sure what the issue is — the spacing and alignment look okay in Firefox — but I could be missing something!)

hi wpyogi, i just want to remove the left and right borders on the wp-caption box, leaving me with the top and bottom spaces where the caption text is – so i want the wp-caption box to be as wide as the image itself

so both 5px extra space on left and right of the image to 0

.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

the above code removes the left side, but the right side is now doubled up to 10px

Okay, see if this will work — add the width to this:

.wp-caption {
    background-color: #DED5FA;
    border: 1px solid #9400D3;
    border-radius: 3px 3px 3px 3px;
    margin: 0 15px 9px 0;
    padding-top: 4px;
    text-align: center;
    width: 440px !important;
}

that would change the width on ALL inserted images, small, medium and large, this is particularly for large images, so i figured just editing the qp-caption box to get rid of left and right padding would be OK for all my images.

.wp-caption {
    background-color: #DED5FA;
    border: 1px solid #9400D3;
    border-radius: 3px 3px 3px 3px;
    margin: 0 15px 9px 0;
    padding-top: 4px;
    text-align: center;
    width: 440px !important;
}

as i thought, this doesnt work and generically alters all other images of all sizes, if you refresh now you will see i have got the left border like i want it, the right has therefore doubled up

Given your existing code, I don’t know a way to only target large ones (i.e. there is not a separate class for large ones). Where did your theme come from?

wpyogi, we are on the right track here as the css is where the solution is, this will target ALL sizes every time wp-caption is applied, its just this particular image is a large one and if this fits perfectly, all smaller ones will also

it’s something in here:

.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.wp-caption {
border: 1px solid #9400d3;
text-align: center;
background-color: #ded5fa;
padding-top: 4px;
margin: 0px 15px 9px 0px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

I’m not sure – the problematic width is really the inline css for the element:

<div id="attachment_4366" class="wp-caption alignleft" style="width: 450px">

that’s a function call then, right? that’s making the wp-caption box 10px bigger than the large image size 440px, so if we could change wp-caption to re-size the large images at 430px, that would work too

It’s making the div which contains the image and the caption 450px wide. You’ll have to look for where that is set.

STOP PRESS! i’ve sorted it and it was even easier than i thought.

i went to Settings> Media> and changed the ‘Large’ image size width to 430px. now it aligns perfectly and wp-caption can still add it’s extra 5px on top, left and right LOL

thanks, if you refresh you will see what i mean

i feel so dumb…

OMG, well glad you got it — LOL! Nothing like taking the long route to the solution – ha ha!