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

Gabriel Ward
Gabriel Ward
20,222 Points
Posted by Gabriel Ward
Gabriel Ward
20,222 Points

Responsive and correctly proportioned images in Wordpress

I'm trying to get my image thumbnails in my Wordpress theme I'm developing to be responsive and correctly proportioned. Currently the width narrows but the height stays the same when the browser is narrowed, and the image appears stretched, rather than correctly proportioned. I have this is my home.php file

<?php while ( have_posts() ) : the_post(); ?>
    <?php if( get_the_post_thumbnail() ) : ?>
                        <div class = 'image'>   
                            <div class="feat-img">
                                <?php the_post_thumbnail('medium'); ?>
                            </div>
                            <div class ='text'><h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2></div>
                        </div>    
                                <?php endif; ?> 
<?php endwhile; ?>

Any help is greatly appreciated.

3 Answers

Joel Bardsley
Joel Bardsley
31,249 Points
Joel Bardsley
Joel Bardsley
31,249 Points

Hi Gabriel, it sounds like a css issue instead of anything to do with your home.php file. Adding the following to your .css file should stop the image stretching vertically:

.feat-img img {
  height: auto;
}

Unless you've chosen to have the image set to a fixed height for a reason?

Gabriel Ward
Gabriel Ward
20,222 Points
Gabriel Ward
Gabriel Ward
20,222 Points

Hi Joel,

thanks for the suggestion Joel, that worked. I did not have the img added to .feat-img {}; as soon as I had .feat-img img then the problem was solved. Cheers.

Stephen O'Connor
Stephen O'Connor
22,291 Points
Stephen O'Connor
Stephen O'Connor
22,291 Points

Is the image width and height in your html when you look at your source? And what css to your have attached to your images?

Gabriel Ward
Gabriel Ward
20,222 Points
Gabriel Ward
Gabriel Ward
20,222 Points

Hi Stephen,

Thanks for your response. The problem was with my CSS. I had styling added to only .feat-img {}, not .feat-img img {}

As soon as I selected .feat-img img {} then everything was solved.

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

For anyone else having a similar issue the answer can be found here under UPDATE 2 :)

-Rich