user6680 user6680 - 3 months ago 14
CSS Question

lessening the gap between rows on top

I'm having issues getting the top gap to match the distance of the left and right gap between items. How can I get the top gap narrower so it's consistent with the left and right gap of each bootstrap button?
enter image description here

html



<div ng-controller="RecipeController">
<div class="row">
<div class="col-md-offset-5">
<form class="form-inline">
<input ng-model="query" type="text" class="form-control"
placeholder="Search Chicken Recipes" autofocus>
</form>






<div class="row">

<div ng-repeat="recipe in ChickenRecipes | limitTo: -16 | filter:query | orderBy: 'name' ">
<div class="col-md-3">
<div class="row top-buffer"> </div>

<button class="btn btn-primary btn-lg" ng-click="open(recipe)"><img ng-src="{{recipe.image}}" alt="recipeImage" class="recipeImage"/><br>{{ recipe.name }}</button> <br />
</div>
</div>

</div>
</div><!--end recipeController-->


</div><!--end container-->


app.css

#header{

font-family: Century Gothic, sans-serif;
color:red;
margin-left:auto;
margin-right:auto;
width:70%;

font-weight:bold;

font-size:30px;
}


.row{

margin:0 auto;

}

.hrstyle {
height: 30px;
border-style: solid;
border-color: #8c8b8b;
border-width: 4x 0 0 0;
border-radius: 40px;
}
.hrstyle:before {
display: block;
height: 30px;
content: "";
margin-top: -31px;
border-style: solid;
border-color: #8c8b8b;
border-width: 0 0 4px 0;
border-radius: 40px;
}

.links{
font-size:24px;
margin-top:-24px;
}
.col-md-4{
margin:0 auto;
text-align:center;
line-height: 1.2;
}


/*Dialog CSS*/
.ng-modal-overlay {
/* A dark translucent div that covers the whole screen */
position:absolute;
z-index:9999;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000000;
opacity: 0.8;
}
.ng-modal-dialog {
/* A centered div above the overlay with a box shadow. */
z-index:10000;
position: absolute;
width: 50%; /* Default */

/* Center the dialog */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);

background-color: #fff;
box-shadow: 4px 4px 80px #000;
}
.ng-modal-dialog-content {
padding:10px;
text-align: left;
}
.ng-modal-close {
position: absolute;
top: 3px;
right: 5px;
padding: 5px;
cursor: pointer;
font-size: 120%;
display: inline-block;
font-weight: bold;
font-family: 'arial', 'sans-serif';
}

.recipeImage{
width:240px;
height:180px;
margin-left:auto;
margin-right:auto;

}
.recipeImageModal{
width:240px;
height:180px;
margin-left:auto;
margin-right:auto;
float:left;

}

.top-buffer { margin-top:30px; }
h3{

text-align:center;
color:red;
font-weight:bold;
}

h2{
font-weight:bold;
text-align:center;

}
ul
{
list-style-type: none;
font-weight:bold;

}
.modal-body{


height:600px;

}
.ingredients{
font-weight:bold;

}
li{


}
.ingredientsTitle{
color:red;

}

Answer

check the following code.

.top-buffer {
   margin-top: 30px;
}

this creates problem.

Comments