Krang Krang - 4 months ago 25
Sass (Sass) Question

Bootstrap pushing image gallery content below the body

Hey i'm trying to just setup a simple gallery using bootstrap — i layed the gallery out in rows that are unordered lists. however the rows start to get pushed below the fold of the body.

two things i'm curious about:
1. how can I keep all my gallery items (the list items) in the same row, while using the bootstrap column conventions.
2. what's wrong with my current html layout — why does it push the content below the fold and not keep them within the body.

here is a pen for you to check out

here is the code ...



html,
body {

width: 100%;
height: 100%;
min-height: 560px;

}

body {

position: relative;
background-color: #fff;
-webkit-font-smoothing: antialiased;
line-height: 1.4;
font-size: 100%;

}

header {

width: 100%;
z-index: 10;
background: #212121;
padding: 40px 0 21px 0;

.wrapper {

overflow: visible;
height: 40px;
width: 940px;
margin: 0 auto;

a {

color: #fff;
text-decoration: none;

}

#logo {

text-indent: 100%;
padding-left: 20px;
white-space: nowrap;
overflow: hidden;
width: 120px;
height: 20px;
margin: 0;
float: left;
background: url("../images/maark-logo.png") no-repeat 20px 0px / 100px 20px;

}


.dd-menu {

width: 40%;
float: right;

}


}

}

.main-container {

height: calc(100% - 101px);
background: #0381e2;
}

.main-container,
.row,
ul {
border: 0;
margin: 0;
padding: 0;
}

ul {
list-style: none;
display: block;
text-align: center;
}

.gallery-list-item {
height: 400px;
background: black;
border-radius: 6px;
float: none;
display: inline-block;
margin: 40px 15px;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="css/app.css">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900' rel='stylesheet' type='text/css'>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
</head>
<body>

<header>
<div class="wrapper">
<a href="" title="">
<h1 id="logo">Maark</h1>
</a>
<nav>
<select id="pages-menu" class="form-control dd-menu input-sm">
<option value="http://localhost:3000/submission-landing">page one</option>
<option value="http://localhost:3000/submission-narrative">page two</option>
<option value="http://localhost:3000/submission-final-details">page three</option>
<option value="http://localhost:3000/management-home-dashboard">page four</option>
<option value="http://localhost:3000/management-landing">page five</option>
<option value="http://localhost:3000/management-landing">page five</option>
</select>
</nav>
</div>
</header>

<div class="main-container container-full">
<ul class="row">
<li class="gallery-list-item col-sm-3">
<div class="page-thumbnail"></div>
</li>
<li class="gallery-list-item col-sm-3">
<div class="page-thumbnail"></div>
</li>
<li class="gallery-list-item col-sm-3">
<div class="page-thumbnail"></div>
</li>
</ul>
<ul class="row">
<li class="gallery-list-item col-sm-3">
<div class="page-thumbnail"></div>
</li>
<li class="gallery-list-item col-sm-3">
<div class="page-thumbnail"></div>
</li>
<li class="gallery-list-item col-sm-3">
<div class="page-thumbnail"></div>
</li>
</ul>
<ul class="row">
<li class="gallery-list-item col-sm-3">
<div class="page-thumbnail"></div>
</li>
<li class="gallery-list-item col-sm-3">
<div class="page-thumbnail"></div>
</li>
<li class="gallery-list-item col-sm-3">
<div class="page-thumbnail"></div>
</li>
</ul>

</div>


</body>
</html>




Answer

I'm not sure what you mean by the body fold, but if you mean why does your background color not extend to all your list items, your line

height: calc(100% - 101px);

within main-container is causing the issue.

As for your rows, you don't need to place each four list items in their own rows. You can put them all in one and have the same appearance. Since the containing row is 12, having 4 rows of 3 will be the same as having them each in their own row, and will save you some extra typing.

Updated pen