CODEWITHSUNDEEP
phpwordpressthumbnailsmedia
fred
fred

Reputation: 485

Responsive Wordpress post thumbnail

So I have a responsive portfolio gallery that displays all the featured images of my portfolio custom post type.

In functions.php I set the post thumbnail size to: 

set_post_thumbnail_size( 960, 540, true )

The site has a max width of 1920px, so technically since it's a two column gallery the images will never be bigger than half of that.

On chrome it looks as I want it to, the images shrink to the proper size when the browser gets smaller. In Internet Explorer though they aren't responsive, any thoughts as to why, and how I can fix it?

Here is the CSS for my gallery:

@media screen and (min-width : 640px){

    .item{
        display:inline-block;
        clear:none;
    }

    .item:nth-child(odd){
        width:50%;
        float:left;
        clear:both;
    }
    .item:nth-child(even){
        width:50%;
        float:right;
    }
}

.img {
        position: relative;
}

Here is the html/php :

    <div class="item">
      <?php $site= get_post_custom_values('projLink'); 
        if($site[0] != ""){
      ?>        
        <div class="img">
          <a title="<?=$title?>" href="<?=$site[0]?>">
            <?php the_post_thumbnail(); ?>
          </a>
          <span class="itemTitle"><?php the_title(); ?></span>
        </div>
      <?php }
        else { ?>
           <p><em>You need to post your link.</em></p>
        <?php } ?>
   </div>

Upvotes: 0

Views: 1914

Answers (1)

Eoin Murphy
Eoin Murphy

Reputation: 813

Try to set the width of the images explicitly to 100% of the parent.

Like so:

.item img {
    position:relative;
    width: 100%;
}

Edit: Not the class, the actual image tag.

Upvotes: 1

Related Questions