Images with caption overflowing content area

[senordeer]

I am using Sample full width child theme, so it's an old theme, not HTML5. If I add a caption to an image in a blog post, it overflows the content area. Example, first image in post here:

Heart-shaped Dark Chocolate Covered Almond Butter Bars

I have tried all combinations of CSS max-width, etc., nothing seems to work. Images without caption are set to max-width: 100%, height: auto and fit into content area (set to 660px) just fine, but I cannot get my images with captions to fit into content area. Thanks in advance!

http://dev.wordpresstest.net/2016/03/03/heart-shaped-dark-chocolate-covered-almond-butter-bars/

[Doug Edgington]

Not familiar with this theme, but it appears to be an older fixed layout. The content area is 600px ( excluding the 10px of padding ), and your caption is 770px all together. So it is too large for the content area. Basically, you have 660px to work with. So you could try using an image that is 648px ( 660px minus 12px for padding and border = 648px ).

If you are wanting to force it to always fit via CSS, you could try something like the example below.

.wp-caption {
	max-width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
}

.wp-caption img {
	max-width: 100%;
	height: auto;
}

---

Doug Edgington
http://www.dougedgington.com

[senordeer]

Doug that CSS worked perfectly, I didn't want to have to size each image before uploading. I was missing the webkit and moz box sizing on the CSS I had before, thanks again this is resolved.

[Doug Edgington]

No problem.

---

Doug Edgington
http://www.dougedgington.com

[Author]

Posts