Ne Kr Ne Kr - 7 months ago 37
HTML Question

control one sections height

I am making my own fishing website:) But I am really in doubt how to structure some of my sections. The pictures below shows how I would like this section. On that specifik section I have a 100% width. But if I set a height and padding on that sections, it affects all my other col-12. So how can I set a height, padding, margin on that specifik section?

How I would like my page:
How I would like it

My Site:
My Site

HTML:

<!-- Main & Nav -->
<div class="main-header" role="main">
<nav class="global-nav">
<ul class="title-area">
<li>sdf</li>
</ul>
<ul>
<li>Home</li>
</ul>

</nav>
</div>
<!-- Here is the section I would like to style -->
<div class="row">
<div class="col col-12">
<h2>Favorite Flies</h2>
</div>
</div>
<!-- Flies -->
<div class="row">
<div class="col-md-6">
<ul id="filters" class="clearfix">
<li><span class="filter active" data-filter="app card icon logo web">Rated</span></li>
<li><span class="filter" data-filter="app">Sea</span></li>
<li><span class="filter" data-filter="card">Lake</span></li>
<li><span class="filter" data-filter="icon">Autaum</span></li>
<li><span class="filter" data-filter="logo">Summer</span></li>
<li><span class="filter" data-filter="web">Winter</span></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row mar-b-30">
<div id="portfoliolist">
<div class="col-md-12">
<div class="portfolio logo" data-cat="logo">
<div class="portfolio-wrapper">
<div class="portfolio-hover">
<div class="image-caption">
<a href="img/portfolios/logo/5.jpg" class="label magnefig label-info icon" data-toggle="tooltip" data-placement="left" title="Zoom"><i class="fa fa-eye"></i></a>
<a href="blog-detail.html" class="label label-info icon" data-toggle="tooltip" data-placement="top" title="Details"><i class="fa fa-link"></i></a>


</div>
<img src="img/fly/barbine.jpg" alt="" />

</div>
</div>
</div>

<div class="portfolio app" data-cat="app">
<div class="portfolio-wrapper">
<div class="portfolio-hover">
<div class="image-caption">
<a href="img/portfolios/app/3.jpg" class="label magnefig label-info icon" data-toggle="tooltip" data-placement="left" title="Zoom"><i class="fa fa-eye"></i></a>
<a href="blog-detail.html" class="label label-info icon" data-toggle="tooltip" data-placement="top" title="Details"><i class="fa fa-link"></i></a>


</div>
<img src="img/fly/black_dog.jpg" alt="" />
</div>
</div>
</div>


CSS:

body {
color: #797979;
font-family: 'roboto';
font-weight: 300;
padding: 0px !important;
margin: 0px !important;
font-size: 14px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'roboto';
font-weight: 300;
text-align: center;
}
a,
a:hover,
a:focus {
text-decoration: none;
outline: none;
}
::selection {
background: #48cfad;
color: #fff;
}
::-moz-selection {
background: #48cfad;
color: #fff;
}


#map {
width: 100%;
height: 300px;
}

.global-nav {
overflow: hidden;
margin-bottom: 0px;
height: 55px;
background: #333;
}
.main-header {
background: url(../img/bg_1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 700px;
overflow: hidden;
}

/* Rows */
.row{
margin-left:-15px;
margin-right:-15px;
}
.row:after{
content:'';
display:block;
clear:both
}
/* General properties of columns */
.col{
padding: 0rem;
float:left;
}

/* Column Definition */
.col-1{
width:8.33333333%
}

.col-2{
width:16.66666667%
}

.col-3{
width:25%
}

.col-4{
width:33.33333333%
}

.col-5{
width:14.666667%
}

.col-6{
width:50%;
}

.col-7{
width:58.33333333%
}

.col-8{
width:66.6666667%
}

.col-9{
width:75%
}

.col-10{
width:83.33333333%
}

.col-11{
width:91.6666666%
}
.col-12{
width:100%;
}

Answer

Just add one more class or an id to the 'div' you want for which you want to set the height, padding and margin.

Then jump into your CSS and use the newly made class name or id to set the height, padding and margin.

Code :

.colPadding {
  padding: 20px;
}
<div class="row">
  <div class="col col-12 colPadding">
    <h2>Favorite Flies</h2> 
  </div>
</div>