Wordpress fixed width on figures and padding from bootstrap thumbnail

Hi. I am just getting started and I noticed something weird:

Right out of the box, with a new installation of roots and wordpress, adding an image to a post or page using the wordpress content editor results in a strange thing.

The <figure> container as output by the roots cleanup function within the page content has a fixed width that is the same size as the image. The bootstrap .thumbnail styles applied to the <img> have a padding of 10px, however, which pushes the image out of the container, which is too small because it’s fixed width doesn’t account for the padding applied to the child.

This is not so hard to fix (by editing the roots wordpress-cleanup function for figures or getting rid of the padding on the .thumbnail class), but it makes me wonder if I am missing the point entirely. Am I doing something wrong here?

-db

I’m not sure I completely understand the issue. Have you tried the following? http://getbootstrap.com/css/#overview-responsive-images

Thank you very much for your response. Adding the .img-responsive class to the img element fixed it very nicely!

So I added this to my app.less in order to apply that style to all elements within figure elements to fix the issue across the site:

figure.thumbnail > a > * {
.img-responsive; }

I still don’t understand why the padding on the img element didn’t expand the width of the figure element. I actually can’t manage to recreate the situation in jsfiddle.

It also seems strange to me that the Roots theme behaves this way out of the box, which is why I wondered whether I might be doing something wrong to begin with.

Thanks again!

I followed Bootstrap 3 development for about 8 months and removing these styles from all <img> elements was done near the end. While I prefer to add it back with every new project like below, I understand their logic. It was done because it conflicts with not only Google Maps but other external libraries.

img {
   .img-responsive;
}

and then I do what was done before to avoid these issues with external libraries

.googlemap .map_canvas img {
	max-width: none !important;
}

Roots probably doesn’t implement this as standard to allow the developer to choose which way to go. It is easy to add through CSS as you have done already :slight_smile: