I am trying to create a design with a parent div containing three main elements - a dotted line from the top of the div to the headline, the headline itself, and another dotted line from the middle to the bottom of the div.
My question is how can I make these dotted lines (which work as divs with backgrounds) fluid so that their height adjusts based on the screen height? Here is an example fiddle of what I have so far: http://jsfiddle.net/5wo01f1y/4/
This is a snippet of my code:
<section id="whatwedo">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="dots"> </div>
<div class="heading"><span>We love</span> <h1>What we do</h1></div>
<p>Bakery & Sweets</p>
<div class="dots"> </div>
<i class="fa fa-chevron-down btn-down"></i>
</div>
</div>
</div>
</section>Here is some of the CSS:
@import url(http://fonts.googleapis.com/css?family=Signika+Negative:300,400,600,700&subset=latin-ext);
@import url(http://fonts.googleapis.com/css?family=Merriweather:400italic,400,700,700italic&subset=latin-ext);
body {
font-family:'Signika Negative', sans-serif;
font-size:14px;
}
html, body {
min-height:100%;
height:100%;
}
#whatwedo .heading {
display:inline-block;
background:#da2027;
}
#whatwedo .heading span {
color:#fff;
text-transform:uppercase;
font-size:36px;
}
#whatwedo p {
font-family:'Merriweather', sans-serif;
color:#fff;
font-size:1.7em;
}
#whatwedo{
background-color:#da2027;
margin-top:0;
padding-top: 85px;
padding-bottom: 30px;
text-align:center;
height:100%;
}
#whatwedo h1 {
color: white;
text-transform:uppercase;
display:inline-block;
}
.btn-down {
text-align:center;
margin:0 auto;
color:#fff;
}
.dots {
height:100%;
margin:0 auto;
width:9px;
overflow:hidden;
background:url('http://s23.postimg.org/8wexsdl07/dot.png') repeat-x;
}
I'm wondering if there is a simpler hack to achieve this without using jquery. Any suggestions would be appreciated!