10px gap on the right side of images

CattyTheCat · March 2015

Hi, I have a strange issues. I have edited the css for the image display within texts a bit (making the border smaller). It now seems that there is some built in function to automatically add 10px to the wp-caption div that the picture is in (made sense, as it made room for the extra border space?). The picture width is 265px, where is the width: 275 coming from and where can I change it?

<div class="wp-caption alignright" style="width: 275px" id="attachment_422"><a href="URL TO IMAGE"><img width="265" height="195" alt="Caption" src="URL TO IMAGE" class="size-full wp-image-422"></a><p class="wp-caption-text">CAPTION</p></div>

Albert · March 2015

Hi,

What is the url to page where this happen so we can have a look on it?

CattyTheCat · April 2015

It is a local installation so sadly can't provide an URL. Would it help if I posted the css changes I made to that particular area?

CattyTheCat · April 2015

Put it online - I know there was heavy editing (and partly the lazy kind with just using important! to override things that didn't want to bend to my will

) but I hope the issue is still fixable.

CattyTheCat · April 2015

Hm, I've posted the URL but it isn't visible in my post? Next try: techmonkey.me/baik/

Albert · April 2015

Ok, we see your website but where this gap is? Because on our side we did not noticed any gap. All images looks really good.

CattyTheCat · April 2015

On the home page, the picture that has been included into the page with the black caption box underneath (where it says "bild from laden") there is a 10px gap on the right, the caption box overlaps by 10px.
As shown in the above css, the image is 265px and the div around it (wp-caption) is 275px.

CattyTheCat · April 2015

Albert · April 2015

Ok, thanks. As we see, this happen because image is not big enough. And all you can do in this case is center this image with below css:

.image_frame a, .wp-caption a { text-align: center; }

CattyTheCat · April 2015

Thank you for the quick reply. What is the minimum size a picture needs to be? Because I ahve the same issue on this page and the picture is 300px there (and once again 10px are added to the div around it)
http://www.techmonkey.me/baik/werkstatt/
On this it is even 371px!
http://www.techmonkey.me/baik/verleih/

The site is supposed to go live today and that can't happen with a display error this bad

What hook or part in the functions file is telling the css to add 10px? Because that is what is happening for every single image. Any way I can simply remove that function?

If I center it I will have two gaps, one left and one right

Albert · April 2015

For example, on this page http://www.techmonkey.me/baik/werkstatt/ if we increase width to 310px, image fits perfectly. We just increased width for test and looks great what you can see on http://pasteboard.co/2eRkou62.png

CattyTheCat · April 2015

I've uploaded an image that is 310px wide and the div increases in size to 320px, resulting in another gap.
http://www.techmonkey.me/baik/ as you can see here.
The size of the div seems to be created automatically with a plus 10px (firebug shows the width to be defined in

element.style {

}

If i just change the size in firebug it of course works - as the actually automatism of adding an image is not touched.
Sadly still not fixed

CattyTheCat · April 2015

[caption id="attachment_486" align="alignright" width="310"]<a href="http://www.techmonkey.me/baik/wp-content/uploads/2014/12/platzhalter00.jpg" rel="prettyphoto"><img class="wp-image-486 size-full" src="http://www.techmonkey.me/baik/wp-content/uploads/2014/12/platzhalter00.jpg" alt="" width="310" height="228" /></a> Platzhalter[/caption]

This is the actual code added into wordpress, the width is still just fine here

CattyTheCat · April 2015

If I remove the element.style property in firebug, all is fine and dandy. So: how do I get this out of the sourcecode? no problem in editing source files, I just want it gone so the site can go live

(

Albert · April 2015

Please try below code then because we do not have any other solution for your issue:

.wp-caption img { width: 100% !important; }

CattyTheCat · April 2015

HA!! That worked!
Thank you for your quick help! I know why I keep recommending your theme to all my customers!

Albert · April 2015

Glad to hear this one works

10px gap on the right side of images

Comments