Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Bob Sutherton
Bob Sutherton
20,160 Points
Posted by Bob Sutherton
Bob Sutherton
20,160 Points

How to make images responsive in WordPress with a Custom Theme?

I am directing this question to Zac Gordon. I built this site following along with your course on building a custom theme with Bootstrap.

My question is: why aren't the images (in the posts/articles) responsive? I know Bootstrap is a responsive framework that comes with an 'img-responsive' tag for making responsive images. Yet it doesn't seem to work here. I added the 'img-responsive' tag for images through the WordPress editor - to no avail.

I tried to get through a bunch of confusing blog posts about Picturefill and tried installing several WordPress plugins.

Nothing is really clicking.

We are probably going to take this site live soon and this is one of the final big things. The site isn't perfect but it's the first real project I've done (by following along with your videos). If you could have put me on the scent of a solution here I would be most grateful!

1 Answer

mtch
mtch
8,521 Points
mtch
mtch
8,521 Points

What you could always try is setting the images width and height to 100%.

Like in this fiddle - http://jsfiddle.net/cpveeyfe/

The other method I am aware off is having different sized pictures to cover the msot used resolutions - but that's counterproductive and heavy.

Bob Sutherton
Bob Sutherton
20,160 Points
Bob Sutherton
Bob Sutherton
20,160 Points

Hey mtch, thanks for responding. That is what the 'img-responsive' class in bootstrap does. For some reason though, it has no effect. I have also tried adding it manually with no effect! I wonder what's going on?