0

I am a complete beginner, I learned HTML and CSS for a month or two. I follow a course and I must compile this sass code and this must show exactly as figma. Sadly, I don't know how to make those elements or containers, to be closer to each other. I tried deleting the gap property but nothing happened.

These elements are not gaping properly:

These elements are not gaping properly

@import "../utils/vars";
.features {
  display: flex;
  gap: 2px;
}
.features-list {
  display: flex;
  align-items: start;
  justify-content: center;
  margin: 0 auto;
  gap: 2px;
  &__image {
    width: 270px;
    height: 120px;
    background: #f5f4fa;
    border-radius: 4px;
  }
  &__title {
    display: flex;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.14;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: $black-color;
  }
  &__description {
    display: flex;
    max-width: 50%;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.71;
    letter-spacing: 0.03em;
    color: $gray-color;
  }
  &__svg {
    transform: translate(97px, 24px);
  }
}


/* compiled SASS */

.features {
  display: flex;
  gap: 2px;
}

.features-list {
  display: flex;
  align-items: start;
  justify-content: center;
  margin: 0 auto;
  gap: 2px;
}

.features-list__image {
  width: 270px;
  height: 120px;
  background: #f5f4fa;
  border-radius: 4px;
}

.features-list__title {
  display: flex;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.14;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: black;
}

.features-list__description {
  display: flex;
  max-width: 50%;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.71;
  letter-spacing: 0.03em;
  color: gray;
}

.features-list__svg {
  transform: translate(97px, 24px);
}
<section class="section features">
  <ul class="list-content features-list">
    <li>
      <div class="features-list__image">
        <svg>
          <use href="./images/icons-svg.svg#icon-antenna-1"
               width="70px"
               height="70px"
               class="features-list__svg">
          </use>
        </svg>
      </div>
      <h2 class="features-list__title">ATTENTION TO DETAILS</h2>
      <p class="features-list__description">
        We go into all the details and processes of your business to develop a customized solution.
      </p>
    </li>
    <li>
      <div class="features-list__image">
        <svg>
          <use href="./images/icons-svg.svg#icon-clock-1"
               width="70px"
               height="70px"
               class="features-list__svg">
          </use>
        </svg>
      </div>
      <h2 class="features-list__title">PUNCTUALITY</h2>
      <p class="features-list__description">
        With us, you can feel safe and secure. An important principle of the company: respect your time and deadlines.
      </p>
    </li>
    <li>
      <div class="features-list__image">
        <svg>
          <use href="./images/icons-svg.svg#icon-diagram-1"
               width="70px"
               height="70px"
               class="features-list__svg">
          </use>
        </svg>
      </div>
      <h2 class="features-list__title">PLANNING</h2>
      <p class="features-list__description">
        You will be able to observe and participate in every phase of solution development and implementation.
      </p>
    </li>
    <li>
      <div class="features-list__image">
        <svg>
          <use href="./images/icons-svg.svg#icon-astronaut-1"
               width="70px"
               height="70px"
               class="features-list__svg">
          </use>
        </svg>
      </div>
      <h2 class="features-list__title">MODERN TECHNOLOGIES</h2>
      <p class="features-list__description">
        We use innovative tools to solve assigned tasks. It's time to simplify work processes.
      </p>
    </li>
  </ul>
</section>

Improve this question
6
  • Have you tried playing with justify-content: space-between or space-evenly on .features-list? Commented Sep 11, 2023 at 12:38
  • Yes ! it seems like it needed a width , i put a width with some percentage and it looks better. But i want to learn more and i am sure that there are better solution to this Commented Sep 11, 2023 at 12:41
  • 2
    Well yes your container needs a width or else it's going to take only the width of its content. I advise you to spent a few minutes doing the drill on this link, you'll understand better how flex works. flexboxfroggy.com Commented Sep 11, 2023 at 12:43
  • 1
    Yes, it seems like i completely forgot about width , but live and learn Commented Sep 11, 2023 at 12:51
  • You haven't shared the figma link (or at least a screenshot with what you're trying to achieve). How do you expect us to know what you're trying to achieve? You should have various figma designs for various page widths. Ref: "I'm sure that there are better solution to this". Yes, you're not supposed to hard-code widths onto column elements. Instead, you control the width of the column and you make its contents look good in the column's width. Commented Sep 11, 2023 at 15:25
Related questions
2114
Click through div to underlying elements
1133
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
575
Flexbox not giving equal width to elements
Load 6 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.