Photos with caption enabled displaying extra space on right side border « Support Forum | Kriesi.at

Support Forum » Angular

Photos with caption enabled displaying extra space on right side border

8 posts from 3 voices

Started 1 year ago by MidnightKim
Latest reply from MidnightKim
This topic is closed
This topic is resolved

Tags:

No tags yet.

MidnightKim
Member

When inserting a photo with a caption with anything less than “full size” selected, extra whitespace (padding?) is created on the right between the image boundary and the caption border. I thought I saw this come up before but could not find it mentioned on the forum.

You can see it on the theme demo, on the blog page titled “HTML Styles” - the paragraph titled “Image align left with caption.”

Is there a fix for this, or one planned? I can get by without using it for now, but I’d like to use a caption in some of my photos.

Great theme btw, I am new to WP and not a code person and with patience have had no problems getting my site set up.

Thanks,
Kim

Posted 1 year ago #
Devin
Moderator

Hi Kim,

Thanks for the heads up. I'm not sure whats adding the hard coded extra width but I'll tag this for Kriesi to take a look at.

Posted 1 year ago #
Kriesi
Key Master
Hey!

add this to your custom.css stylesheet in folder /css/ or to the quick-css panel located in your wordpress backend at angular->styling:
```
#top .wp-caption img {
padding: 5px;
}
```
that should fix the issue. we will add it to the next update as well ;)
Posted 1 year ago #
MidnightKim
Member

Thanks for the quick reply.

That worked fine for the smaller images, but it forced a full size image to spill over the right side border:

http://1159studio.com/2012/02/08/yet-another-test-post/

Kim

Posted 1 year ago #
Kriesi
Key Master
Hi!

hm tricky. I think we will need to use an advanced css3 feature to fix that:
```
#top .wp-caption img {
padding: 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
```
should do it

Best regards,
Kriesi
Posted 1 year ago #
MidnightKim
Member

Well...

You can see there is now extra padding on the right on smaller images. Full size is fine. Seems correcting one messes up the other.

http://1159studio.com/2012/02/08/yet-another-test-post/

Kim

Posted 1 year ago #
Kriesi
Key Master
gnarr ;D

hm seems there is no universal rule that works for all image sizes so we need to use the classnames that are applied via wordpress.
the fullsize image got the classname .size-full

therefore I would propose the following fix:
```
#top .wp-caption img {
padding: 5px;
}

#top .wp-caption .size-full {
padding: 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
```
Posted 1 year ago #
MidnightKim
Member

Looks great!

Thanks for taking care of that so quickly, Christian. Much appreciated!!!

Cheers,
Kim

Posted 1 year ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.

Kriesi.at - Wordpress Themes and HTML Templates

Photos with caption enabled displaying extra space on right side border

Topic Closed

Support Forum usage - Please read

Check out some of our WordPress Themes

Blog Categories

Latest Themes

Pages

About me…