I
I
Idwln2022-04-16 19:25:34
HTML
Idwln, 2022-04-16 19:25:34

Shift text up. I do not understand what is educated?

Basically, I have some text that goes under the heading and the image, and it's all wrapped up in one common div. (there is also a div for each element). When adding a lot of text, the block just goes up, but I want the text to go down. Here is the code:

body {
  /* font-family: "Gilroy", sans-serif; */
  line-height: 1;
  height: 100%;
  font-size: 0px;
  max-width: 1440px;
  font-family: "Poppins";
}


/* --------------------- */
.block{
  max-width: 1440px;
}
.container {
  display: inline-block;
  text-align: center;
}
.fcontainer{
  display: inline-block;
  padding-left: 165px;
}
.container:not(:last-child){
  display: inline-block;
  margin-right: 35px;
}
.title {
  padding-top: 290px;
  padding-bottom: 58px;
  margin-left: 128px;
  font-style: normal;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.48;
  text-align: center;
  letter-spacing: 0.8px;
  color: #323232;
}

.image {
  display: inline-block;
  margin-bottom: 14px;
}

.subtitle {
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  line-height: 42px;
  letter-spacing: 0.5px;
  color: #323232;
}

.text {
  margin-top: 2px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 27px;
  max-width: 248px;
  letter-spacing: 1.15px;
  color: #323232;
  
}

<main>
    <div class="block">
      <div class="title">Why choose us?</div>
      <div class="container fcontainer">
        <div class="image"><img src="img/01.svg" alt="icon"></div>
        <div class="subtitle">Performance </div>
        <div class="text">Torquem detraxit hosti et quidem se texit, ne ad. Lorem ipsum dolor sit amet consectetur
          adipisicing elit. Quae, rerum.</div>
      </div>
      <div class="container">
        <div class="image"><img src="img/02.svg" alt="icon"></div>
        <div class="subtitle">Entrepreneurship</div>
        <div class="text">Torquem detraxit hosti et quidem se texit, ne ad.</div>

      </div>
      <div class="container">
        <div class="image"><img src="img/03.svg" alt="icon"></div>
        <div class="subtitle">Authenticity</div>
        <div class="text">Torquem detraxit hosti et quidem se texit, ne ad.</div>

      </div>
      <div class="container">
        <div class="image"><img src="img/04.svg" alt="icon"></div>
        <div class="subtitle">Kindness</div>
        <div class="text">Torquem detraxit hosti et quidem se texit, ne ad.</div>

      </div>
    </div>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
B
BEKa T, 2022-04-16
@Idwln

Are you sure that's how you want to make it? Try to reduce/enlarge the browser window Ctrl+mouse wheel. Your layout is not centered

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question