FuManchuNZ FuManchuNZ -4 years ago 172
CSS Question

Mysterious gap/padding in OwlCarousel grid gallery

I am trying to figure out why there is a strange gap/margin at the bottom of each row section in this portfolio grid gallery running in OwlCarousel, see example at http://www.samnorris.net/pfwip2/index.html

enter image description here

I have damn near pulled my hair out already trying to debug the problem in developer tools, and been over the relevant CSS thoroughly but have been unable to figure out what is causing this unwanted padding/margin. Would really appreciate any assistance anyone might be able to offer to help me fix this. :)

I believe it my be something to do with #work .item .rollover, but I am not sure what exactly....

Here is all relevant (as far as I know) code:



///////////////////////////////////////////////////////////////////////////
// Work slider
///////////////////////////////////////////////////////////////////////////

var $workslider = $("#workslider");

if($workslider.length){
$workslider.owlCarousel({
loop : true,
autoplay: true,
autoplayTimeout: 4000,
nav : false,
dots : false,
items : 11,
transitionStyle : "fade"
});
}

/* ==========================================================================

WORK

========================================================================== */

#work.paddingstandard {
padding-bottom: 0px !important;
}


/* ---- isotope grid---- */

#portfoliogrid .item {
width: 20%;
float: left;
cursor: pointer;
overflow: hidden;
padding-bottom: 0px !important;
}

#portfoliogrid .item.width2 {
width: 40%;

}

#portfoliogrid img {
width: 100%
}

/* Item rollover */

#work .item .rollover {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 15px;
text-align: center;
}

#work .item .rollover:before {
content: "";
position: absolute;
height: 50%;
width: 50%;
left: 25%;
top: 26%;
opacity: 0;
margin-top: 40px;
transition: all 0.3s 0.5s, opacity 0.3s 0.8s, margin-top 0.3s 0.8s;
transform: rotateZ(-45deg);
-webkit-transition: all 0.3s 0.5s, opacity 0.3s 0.8s, margin-top 0.3s 0.8s;
-webkit-transform: rotateZ(-45deg);

}

#work .item.width2 .rollover:before {
width: 25%;
left: 38%;

}

#work .item .rollover .centerContainer {
opacity: 0;
height: 100%;
transition: all 0.3s 0.1s;
transform: rotateZ(-5deg);
-webkit-transition: all 0.3s 0.1s;
-webkit-transform: rotateZ(-5deg);

}

#work .item .rollover .centerContainer a {

font-family: "Montserrat";
font-size: 1.250rem;
font-weight: bold;
letter-spacing: -2px;
color: #FFFFFF;
display: block;
text-transform: uppercase;
text-decoration: none !important;

}

#work .item .rollover .centerContainer .title {
font-size: 2.8rem;
line-height: 2.8rem;
margin-bottom: 15px;
}

#work .item:hover .rollover:before,
#work .portfolioActive .rollover:before {
width: 100% !important;
height: 100% !important;
top: 0 !important;
left: 0 !important;
opacity: 1;
margin-top: 0px;
transition: all 0.3s 0.4s, opacity 0.2s 0.1s, margin-top 0.3s 0.1s;
transform: rotateZ(0deg);
-webkit-transition: all 0.3s 0.4s, opacity 0.2s 0.1s, margin-top 0.3s 0.1s;
-webkit-transform: rotateZ(0deg);

}

#work .item:hover .centerContainer,
#work .portfolioActive .centerContainer {
opacity: 1;
transition: all 0.3s 0.6s;
transform: rotateZ(0deg);
-webkit-transition: all 0.3s 0.6s;
-webkit-transform: rotateZ(0deg);

}

/* WORK OPEN ANIMATION */

@keyframes turn {
0% {
transform: rotate(45deg);
}

15% {
transform: rotate(135deg);
}

25% {
transform: rotate(135deg);
}

40% {
transform: rotate(225deg);
}

50% {
transform: rotate(225deg);
}

65% {
transform: rotate(315deg);
}

75% {
transform: rotate(315deg);
}

90% {
transform: rotate(405deg);
}

100% {
transform: rotate(405deg);
}

}

#workLoader {
position: absolute;
z-index: 10000;
-webkit-transition: all 0.8s;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;

}

#workLoader .iconloader {
position: relative;
z-index: 20;
display: block;
margin: 0 auto;
width: 30px;
height: 100%;
width: 100%;

}

#workLoader .iconloader:after {
content: "";
width: 50%;
height: 50%;
position: absolute;
top: 25%;
left: 25%;
border: 4px solid #FFFFFF;
transform: rotateZ(45deg);
animation: turn 4s cubic-bezier(0.86, 0, 0.07, 1) infinite;
-webkit-transform: rotateZ(45deg);
-webkit-animation: turn 4s cubic-bezier(0.86, 0, 0.07, 1) infinite;
-ms-transform: rotate(45deg);

}

#workLoader.width2 .iconloader:after {
width: 25%;
left: 38%;
}

#workLoader .front, #workLoader .back {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;

}

#workLoader .front {
text-align: center;
}

#workLoader .front img {
width: 100%;
opacity: 0.2;

}

#workLoader .back {
background-color: rgba(20, 20, 20, .95);
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);

}

#workLoader .back #wrkclosebtn {
position: fixed;
top: 10px;
right: 20px;

}

#workLoader .back .fa-times {
font-size: 2rem;
cursor: pointer;
color: #5f5f5f

}

#workLoader .back .fa-times:hover {
color: #FFFFFF
}

.scale100 {
width: 100% !important;
height: 100% !important;
left: 0 !important;
transform: perspective(1000px) rotateX(-180deg);
-webkit-transform: perspective(1000px) rotateX(-180deg);

}

#workdetailcontainer.darkBackground {
padding-top: 40px;
}

/* FIX IE 9/10/11 */

.IE #workLoader {
transition: all .8s !important;
transform: none;
}

.IE #workLoader .front, .IE #workLoader .back {
transition: all .8s !important;
}

.IE #workLoader .back {
transform: perspective(1000px) rotateX(180deg) !important;
}

.IE #wrkclosebtn {
display: none;
}

.IE .scale100 #wrkclosebtn {
display: inline;
}

.IE .scale100 {
transition: none !important;
transform: rotateX(0deg) !important;
}

.IE #workLoader.scale100 .back {
transform: perspective(1000px) rotateX(0deg) !important;
z-index: 10;

}

.IE #workLoader.scale100 .front {
transform: perspective(1000px) rotateX(-180deg) !important;
}

.IE9 #workLoader {
background-color: green;
opacity: 0;
}

/* ==========================================================================

WORK DETAILS

========================================================================== */

#workdetail {
padding: 40px 0;
}

#workdetail h1 {
color: #FFFFFF;
line-height: 4rem;
margin-bottom: 35px;
margin-top: 0px;
font-size: 4rem;
text-align: left;
}

#workdetail #detailImg img {
width: 100%;
}

#workdetail .workDouble #detailImg {
margin-bottom: 35px;
}

#workdetail p, #workdetail #details span {
color: #FFFFFF;
}

#workdetail #details {
margin-bottom: 35px;
font-size: 0.9rem;
}

#workdetail #details span {
font-family: 'Montserrat';
}

#workdetail #details li {
color: #CCC;
margin-bottom: 5px;
}

#workdetail .button.tint:hover {
color: #141414;
background-color: #FFFFFF;
}


/* ==========================================================================

ISOTOPE FILTERS GENERAL

========================================================================== */

.isotopeFilter {
margin-bottom: 30px;
}

.isotopeFilter a {
font-size: 1.250rem;
}

.isotopeFilter .is-checked {
color: red;
}

<!--\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
Work section
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->

<section id="work" class="paddingstandard">
<div class="container">
<h2 class="appear" data-animation="translatefrombottom">WORK</h2>
<!-- Description -->
<p class="aligncenter appear">Pellentesque erat velit, pretium vitae dui tempor, scelerisque posuere mi. Etiam fringilla scelerisque nulla volutpat vehicula. Donec tempus ut diam ac pharetra. Quisque quis odio convallis, imperdiet purus dignissim, tempor urna. Curabitur ut nisl nec orci scelerisque vehicula vitae eu nunc.</p>


<!-- Isotope Filter -->
<nav id="portfolionav" class="isotopeFilter aligncenter appear">
<a href="#" data-filter-value="*" class="is-checked">ALL</a>
<a href="#" data-filter-value=".graphic" >GRAPHIC</a>
<a href="#" data-filter-value=".slider">IMAGE SLIDERS</a>
<a href="#" data-filter-value=".video">VIDEO</a>
</nav>
</div>

<div id="portfoliogrid">
<!-- Begin item -->
<div class="item width2 graphic">
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-1.html">CREATIVITY SPLASH</a>
<a href="work-detail-1.html">VIEW DETAILS</a>
</div>
</div>
</div>
<!-- Item Image -->
<img src="img/work/work-double-1.jpg" alt="Portfolio" />
</div>
<!-- End item -->

<div class="item manager" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-2.html">IRRIGATE YOUR MIND</a>
<a href="work-detail-2.html">VIEW DETAILS</a>
</div>
</div>
</div>
<img src="img/work/work-single-1.jpg" alt="Portfolio" />
</div>

<div class="item graphic" data-url="article.html">
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-3.html">DOMOTIC</a>
<a href="work-detail-3.html">VIEW DETAILS</a>
</div>
</div>
</div>
<img src="img/work/work-single-2.jpg" alt="Portfolio" />
</div>

<div class="item developer" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-4.html">JOURNEY TO THE LAND OF TEA</a>
<a href="work-detail-4.html">VIEW DETAILS</a>
</div>
</div>
</div>
<img src="img/work/work-single-3.jpg" alt="Portfolio" />
</div>

<div class="item graphic" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-5.html">FUTURE OF COMMERCE</a>
<a href="work-detail-5.html">VIEW DETAILS</a>
</div>
</div>
</div>
<img src="img/work/work-single-4.jpg" alt="Portfolio" />
</div>

<div class="item manager" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-6.html">CORPORATE DESIGN</a>
<a href="work-detail-6.html">VIEW DETAILS</a>
</div>
</div>
</div>
<img src="img/work/work-single-5.jpg" alt="Portfolio" />
</div>

<div class="item graphic" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-7.html">PHOTO STUDIO</a>
<a href="work-detail-7.html">VIEW DETAILS</a>
</div>
</div>
</div>
<img src="img/work/work-single-6.jpg" alt="Portfolio" />
</div>

<div class="item width2 slider" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-8.html">LOOKING FOR AWESOME IDEAS</a>
<a href="work-detail-8.html">VIEW DETAILS</a>
</div>
</div>
</div>
<img src="img/work/work-double-2.jpg" alt="Portfolio" />
</div>

<div class="item developer" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-9.html">APP MARKET</a>
<a href="work-detail-9.html">VIEW DETAILS</a>
</div>
</div>
</div>
<img src="img/work/work-single-7.jpg" alt="Portfolio" />
</div>

<div class="item developer" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-10.html">DATA STORAGE</a>
<a href="work-detail-10.html">VIEW DETAILS</a>
</div>
</div>
</div>
<img src="img/work/work-single-8.jpg" alt="Portfolio" />
</div>

<div class="item width2 video">
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-11.html">VIDEO TIMELAPSE</a>
<a href="work-detail-11.html">VIEW DETAILS</a>
</div>
</div>
</div>
<img src="img/work/work-double-3.jpg" alt="Portfolio" />
</div>

<div class="item developer" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-12.html">CLEAN DESIGN</a>
<a href="work-detail-12.html">VIEW DETAILS</a>
</div>
</div>
</div>
<img src="img/work/work-single-9.jpg" alt="Portfolio" />
</div>

</div><!-- end "portfoliogrid"-->
</section>




Answer Source

That space is caused by white-space in your html code. You can remove it by applying either...

display:block;

... or...

float:left;
height: auto;

to #portfoliogrid img declaration, on style.css:4218.
I personally prefer the second solution.

As a side-note, you should take a quick look at your console. A library/plugin called glitch seems to output a few errors. I've tested in Chrome and Firefox.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download