My element doesn't have a set height, but it's populated with images causing the Anchor around the images to be unclickable unless I assign a fixed height to .portfolio.
Any ideas on how to resolve this?
HTML Snippet :
<h1 class="text-center">
A glimpse of our portfolio
</h1>
<span class="main-underline"></span>
<div class="portfolio">
<?php
$args = array( 'post_type' => 'portfolio', 'posts_per_page' => 4 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
?>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="portfolio-img">
<a href="<?php echo esc_url( get_permalink() ); ?>">
<?php the_post_thumbnail('portfolio',array('class' => 'img-responsive')); ?>
</a>
</div>
</div>
<?php endwhile; ?>
</div>
CSS Snippet:
/*PORTFOLIO*/
#main2 {
}
.portfolio {
}
.portfolio .portfolio-img img{
width:100%;
}
.portfolio .col-md-3 {
margin:0;
padding:0;
}
Result:
https://i.sstatic.net/n393b.png
Appreciate your assistance