Twitter Bootstrap Question posted in

How to use CSS selectors select child of H5 in this case? – Twitter bootstrap

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

Tags:

2

Answers


  1. 0

    Just add an id for the 2 steps:

    HTML:

    <h5 id="heightdown">REGÍSTRATE</h5>
<h5 id="heightdown">¡JUEGA!</h5>

    CSS:

    #heightdown {
     padding-top: 5px;
}
    Login or Signup to reply.
  2. 0

    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.

    * {
  font-family: Oswald, sans-serif;
}
.step {
  background-color: #000;
  height: 110px;
  border: 2px solid #62a9af;
  border-radius: 60px 0;
  display: flex;
  align-items: center;
}
.step .number {
  color: #ffbe01;
  font-size: 4em;
  line-height: 1.4em;
  text-align: center;
  width: 1.5em;
  height: 1.5em;
  background-color: rgba(98, 169, 175, .25);
  border-radius: 50%;
  margin: 15px;
}
.step h5 {
  font-size: 2em;
  color: #fff;
  font-weight: 500;
  text-transform: uppercase;
}
    <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>

    I’ve simplified your CSS a little, and also changed how your number is added. You’ll notice display: flex; and align-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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search