I created a grid using the Pods plugin. For some reason, there are extra pixels at the bottom of each div (see the white space). I've gone through the code multiple times and cannot find a reason for this. Below is the css for the grid. Would anyone know where the white space is coming from?
link: http://test.mpluczenik.com/#work
Thank you!
Functions.php:
// Add Image size for Portfolio List
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
// additional image sizes
add_image_size('portfolio-thumb', 300, 300, true ); // (cropped)
}
Pods template:
<div class="portfolio-list">
<a href="{@permalink}">
<div class="overlay">
<a href="{@permalink}">{@post_thumbnail.portfolio-thumb}
</a>
<p>
<a href="{@permalink}">{@post_title}
</a>
</p>
</div>
</a>
CSS:
div .portfolio-list{
border: 0px;
padding: 0px;
width: calc(20%);
overflow: hidden;
position: relative;
display: inline-block;
float:left;
}
img.attachment-portfolio-thumb{
width:100% !important;
height:100%!important;
}
div .portfolio-list p{
display: none;
color:#000;
}
div .overlay:hover:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(234,79,38,.75);
width: 100%;
height: 100%;
border:none;
margin:0;
padding:0;
}
div .portfolio-list:hover p {
display:block;
z-index: 9999;
position:absolute;
bottom:50px;
left:0px;
text-align: center;
width:100%;
overflow:hidden;
color:#fff;
margin: 0px;
}
div .portfolio-list:hover a{
color:#fff;
font-weight: bold;
opacity: 50%;
}
Thank you!
