I am styling steps 1,2,3 for my landing page. I use the bootstrap framework in this case.
What I want is just move text for step 1 and step 3 down a little bit but leave step 2 as normal.
.steps:.step:first-child:last-child h5 {
margin-top: 25px;
}
.step {
padding-left: 130px;
padding-top: 12px;
padding-bottom: 25px;
background-color: black;
height: 110px;
border: 2px solid #62a9af;
border-radius: 60px 0px;
}
.step .number {
position: absolute;
top: 14px;
left: 25px;
font-family: "Oswald", sans-serif;
color: #ffbe01;
font-size: 4em;
line-height: 1.4em;
text-align: center;
width: 1.5em;
height: 1.5em;
background-color: rgba(98, 169, 175, 0.25);
border-radius: 50%;
}
.step h5 {
font-family: "Oswald", sans-serif;
font-size: 2em;
color: white;
font-weight: 500;
text-transform: uppercase;
}
.steps {
margin-top: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="steps">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12 col-sm-offset-3 col-sm-7 col-md-offset-0 col-md-4">
<div class="step">
<div class="number">1</div>
<h5>REGÍSTRATE</h5>
<p></p>
</div>
</div>
<div class="col-xs-12 col-sm-offset-3 col-sm-7 col-md-offset-0 col-md-4">
<div class="step">
<div class="number">2</div>
<h5>SIGUE LAS INSTRUCCIONES</h5>
<p></p>
</div>
</div>
<div class="col-xs-12 col-sm-offset-3 col-sm-7 col-md-offset-0 col-md-4">
<div class="step">
<div class="number">3</div>
<h5>¡JUEGA!</h5>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
My Codepen
2
Answers
Just add an id for the 2 steps:
HTML:
CSS:
I don’t think that’s the best way to solve the problem you’re facing, I think you should use flexbox, it’s a lot more responsive. Here’s my code.
I’ve simplified your CSS a little, and also changed how your number is added. You’ll notice
display: flex;
andalign-items: center;
are now in.step
this means everything inside.step
is vertically central.Now the text in each step will look central no matter how many lines they take up.
I hope this helps.