Perch Blog Responsive?

Okay, thanks Drew.

In my sites I give images a class like: class="img-responsive"

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

This will make the image scale nicely inside its parent element.

Hi James. Thank you for your response. Unfortunately, I'm still learning to code so my knowledge of CSS is a little limited. I understand the code you've posted, I just don't know where exactly to put it. Here are the pages I'm having trouble with. Both use the Perch Blog app, but neither image is responsive.

https://mtc.idealynx.com/blog/news.php https://mtc.idealynx.com/blog/post.php?s=06-26-2014-summer-2014-update

And the class="img-responsive" to the 'img' elements in the blog templates called 'posts-in-list.html' and 'post.html'

This will then add the class to the images on your blog listing and post pages and make you images scale.

Hey Kelly,

To jump in:

The code that James posted is a CSS style, and should live in your CSS sheet – news.css perhaps?

You'll also need to hook your image into the CSS, so you'd need to add class="img-responsive" to the <img src="" /> tag in each template that calls the picture into use.

If you're using the standard Blog templates, that may be in the post.html file, but you may also have an image in a listing template that needs the addition of the class name as well.

Finally, you may also need to re-publish the post before it will work.

Hope that helps!

PROBLEM SOLVED

Thanks for your help guys. Upon closer examination of my site, I discovered that the code that James posted was actually in the blog.css file that comes with the app. The only problem was I had commented it out for some reason. All is well now. Thanks again. :)