I'm trying to use this jquery grid plugin, but it's not working with my layout. The images are stacked on top of each other, they seem to be spilling out of .main, and they overlap the footer. Help? :C
body {
padding: 0;
margin: 0;
color: $fontcolor;
background-color: #eee;
font: 100% 'Open Sans', sans-serif;
background-color: $main-bg;
width: 100%;
height: 100%;
}
.container {
margin: 0 auto;
width: 80%;
height: 100%;
}
.main {
width: 100%;
background-color: $content-bg;
}
.grid-container {
background-color: #F9F9F9;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
margin: 20px auto;
position: relative; }
.grid-item {
display: inline-block;
font-size: 0;
position: absolute;
}
.grid-item img {
cursor: pointer;
display: block;
width: 100%; }<body>
<div class="container">
<div class="main">
<div class='grid-container'>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/short.jpg'>
</div>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/tall.jpg'>
</div>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/medium.jpg'>
</div>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/tall.jpg'>
</div>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/short.jpg'>
</div>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/medium.jpg'>
</div>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/medium.jpg'>
</div>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/short.jpg'>
</div>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/medium.jpg'>
</div>
</div>
</div>
</div>
</body>
Make sure you are initializing stackgrid in
windowload.Also try the
.reset()method.