Place hr label to look more natural
This line break I added doesn't sit where I want it to. I want to center it between the title and the images below.
I tried margin-bottom: 20px; but it pushed the images to the page I don't want. I just want to keep the dimensions and center them in between.
The css you are most likely looking for is at the bottom of the css page.
/* PROCESS **********/
#process {
text-align: center;
margin-bottom: 25px;
}
#process-span {
position: absolute;
bottom: 0;
right: 0;
}
#process img {
display: inline;
height: 100%;
width: 100%;
-webkit-border-radius: 10%;
-moz-border-radius: 10%;
box-shadow: 1px 3px 1px 1px;
}
#process p {
z-index: 100;
position: absolute;
font-weight: bold;
top: 235px;
color: white;
font-size: small;
padding: 10px;
margin-right: 15px;
}
#process h4 {
margin-top: 25px;
}
#process .btn-go {
margin-bottom: 500px;
background-color: #4AA0D5;
color: #fff;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
text-decoration: none;
padding: 10px 10px;
border-radius: 10px;
border: 2px white solid;
}
#process .btn-go:hover,
#process .btn-go:focus {
color: #4AA0D5;
border: 2px #4AA0D5 solid !important;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-border-radius: 0%;
-moz-border-radius: 0%;
background-color: #fff;
}
#process .bottom-line {
width: 50px;
}
<section id="process">
<div class="container">
<h2>How the Process Works</h2>
<div class="lead2">
<hr class="bottom-line">
</div>
<!-- lead2 -->
<div class="row">
<div class="col-sm-4">
<img src="img/image2.png" alt="Design">
<span><p>Reach out to me and describe the type of project you want & audience its for.</p></span>
</div>
<!-- col -->
<div class="col-sm-4">
<img src="img/image1.png" alt="Relax">
<p>Sit back and relax! Watch your project grow with routine progress reports & quick-to-respond communication.</p>
</div>
<!-- col -->
<div class="col-sm-4">
<img src="img/image3.png" alt="Finish">
<p>The project will be turned into you at the agreed time and considered completed only when you are
<bold>100%</bold> satisfied.</p>
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
<h4><a href="#contact" class="btn-go">Let Do It!</a></h4>
</section>
<!-- project-features -->
+3
source to share
2 answers
You can add margin: 1rem auto 1.5rem;
in hr
as in the snippet below. The different top / bottom spacings come from the fact that the header above it has more padding-top by default than the next element.
/* PROCESS **********/
.lead2 hr {
margin: 1rem auto 1.5rem;
}
#process {
text-align: center;
margin-bottom: 25px;
}
#process-span {
position: absolute;
bottom: 0;
right: 0;
}
#process img {
display: inline;
height: 100%;
width: 100%;
-webkit-border-radius: 10%;
-moz-border-radius: 10%;
box-shadow: 1px 3px 1px 1px;
}
#process p {
z-index: 100;
position: absolute;
font-weight: bold;
top: 235px;
color: white;
font-size: small;
padding: 10px;
margin-right: 15px;
}
#process h4 {
margin-top: 25px;
}
#process .btn-go {
margin-bottom: 500px;
background-color: #4AA0D5;
color: #fff;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
text-decoration: none;
padding: 10px 10px;
border-radius: 10px;
border: 2px white solid;
}
#process .btn-go:hover,
#process .btn-go:focus {
color: #4AA0D5;
border: 2px #4AA0D5 solid !important;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-border-radius: 0%;
-moz-border-radius: 0%;
background-color: #fff;
}
#process .bottom-line {
width: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<body>
<section id="process">
<div class="container">
<h2>How the Process Works</h2>
<div class="lead2">
<hr class="bottom-line">
</div>
<!-- lead2 -->
<div class="row">
<div class="col-sm-4">
<img src="img/image2.png" alt="Design">
<span><p>Reach out to me and describe the type of project you want & audience its for.</p></span>
</div>
<!-- col -->
<div class="col-sm-4">
<img src="img/image1.png" alt="Relax">
<p>Sit back and relax! Watch your project grow with routine progress reports & quick-to-respond communication.</p>
</div>
<!-- col -->
<div class="col-sm-4">
<img src="img/image3.png" alt="Finish">
<p>The project will be turned into you at the agreed time and considered completed only when you are
<bold>100%</bold> satisfied.</p>
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
<h4><a href="#contact" class="btn-go">Let Do It!</a></h4>
</section>
<!-- project-features -->
</body>
</head>
</html>
0
source to share
There are several ways to do this. You are not using any kind of reset or anything, so the default fields are on h2
and hr
off the browser and are browser and browser dependent. If you want equal space between sections h2
, hr
and images, I would remove the margins from h2
and add a constant top / bottom margin on hr
, and you can use whatever margin you want there.
/* PROCESS **********/
#process {
text-align: center;
margin-bottom: 25px;
}
#process-span {
position: absolute;
bottom: 0;
right: 0;
}
#process img {
display: inline;
height: 100%;
width: 100%;
-webkit-border-radius: 10%;
-moz-border-radius: 10%;
box-shadow: 1px 3px 1px 1px;
}
#process p {
z-index: 100;
position: absolute;
font-weight: bold;
top: 235px;
color: white;
font-size: small;
padding: 10px;
margin-right: 15px;
}
#process h4 {
margin-top: 25px;
}
#process .btn-go {
margin-bottom: 500px;
background-color: #4AA0D5;
color: #fff;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
text-decoration: none;
padding: 10px 10px;
border-radius: 10px;
border: 2px white solid;
}
#process .btn-go:hover,
#process .btn-go:focus {
color: #4AA0D5;
border: 2px #4AA0D5 solid !important;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-border-radius: 0%;
-moz-border-radius: 0%;
background-color: #fff;
}
#process .bottom-line {
width: 50px;
}
#process h2 {
margin: 0;
}
#process hr {
margin: 1em auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<body>
<section id="process">
<div class="container">
<h2>How the Process Works</h2>
<div class="lead2">
<hr class="bottom-line">
</div>
<!-- lead2 -->
<div class="row">
<div class="col-sm-4">
<img src="img/image2.png" alt="Design">
<span><p>Reach out to me and describe the type of project you want & audience its for.</p></span>
</div>
<!-- col -->
<div class="col-sm-4">
<img src="img/image1.png" alt="Relax">
<p>Sit back and relax! Watch your project grow with routine progress reports & quick-to-respond communication.</p>
</div>
<!-- col -->
<div class="col-sm-4">
<img src="img/image3.png" alt="Finish">
<p>The project will be turned into you at the agreed time and considered completed only when you are
<bold>100%</bold> satisfied.</p>
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
<h4><a href="#contact" class="btn-go">Let Do It!</a></h4>
</section>
<!-- project-features -->
</body>
</head>
</html>
0
source to share