CODEWITHSUNDEEP
htmlcss
Shashank
Shashank

Reputation: 339

Unable to move this text up in a specific div

I am trying to move this paragraph of text upwards in a div, so that it looks uniform, but I am unable to. In the particles class I changed the position to absolute but that causes the text on other divs to overlap onto this one. I tried adding padding-bottom: 30px; in the section about p class but that just increases the size of the div from the top.

#particles {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
  background: #00a1de;
}
section.about {
  position: absolute;
  left: 0;
  top: 50%;
  padding: 0 10px;
  width: 100%;
  text-align: center;
}
section.about p {
  font-size: 26px;
  line-height: 1.5em;
  color: white;
  margin: 0;
  text-align: center;
  font-weight: 300;
}
<div id="particles">
  <section class="container-fluid about">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue vel erat sed efficitur. Nullam vitae sagittis nisi. In vulputate sit amet lorem at pharetra. Nam a imperdiet augue. Vivamus hendrerit ex id congue bibendum</p>
        </div>
      </div>
    </div>
  </section>
</div>

Upvotes: 0

Views: 127

Answers (2)

Rohit Kumar
Rohit Kumar

Reputation: 2031

If I'm getting you correctly, then you need this -

#particles {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
  background: #00a1de;
}
section.about {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* This line */
  padding: 0 10px;
  width: 100%;
  text-align: center;
}
section.about p {
  font-size: 26px;
  line-height: 1.5em;
  color: white;
  margin: 0;
  text-align: center;
  font-weight: 300;
}
<div id="particles">
  <section class="container-fluid about">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue vel erat sed efficitur. Nullam vitae sagittis nisi. In vulputate sit amet lorem at pharetra. Nam a imperdiet augue. Vivamus hendrerit ex id congue bibendum</p>
        </div>
      </div>
    </div>
  </section>
</div>

I added the transform: translate(-50%) to shift the section.about up.

Is that you wanted?

Upvotes: 1

CodeRomeos
CodeRomeos

Reputation: 2448

Remove position absolute.

section.about {
/*position: absolute;*/
left: 0;
/*top: 50%;*/
padding: 0 10px;
width: 100%;
text-align: center;
}

Upvotes: 5

Related Questions