Learn Typography by Building a Nutrition Label - Step 43

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Nutrition Label</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
  <link href="./styles.css" rel="stylesheet">
</head>

<body>
  <div class="label">
    <header>
      <h1 class="bold">Nutrition Facts</h1>
      <div class="divider"></div>
      <p>8 servings per container</p>
      <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
    </header>
    <div class="divider large"></div>
    <div class="calories-info">
      <div class="left-container">
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories</p>
      </div>
      <span>230</span>
    </div>
    <div class="divider medium"></div>

<!-- User Editable Region -->

    <div class="daily-value small-text">
      <p class="bold right">% Daily Value *</p>
      <div class="divider"></div>
      <p><span class="bold"><span>Total Fat</span></span> <span>8g</span> <span>10%</span></p>
    </div>

<!-- User Editable Region -->

  </div>
</body>
</html>

/* file: styles.css */
* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.label {
  border: 2px solid black;
  width: 270px;
  margin: 20px auto;
  padding: 0 7px;
}

header h1 {
  text-align: center;
  margin: -4px 0;
  letter-spacing: 0.15px
}

p {
  margin: 0;
  display: flex;
  justify-content: space-between;
}

.divider {
  border-bottom: 1px solid #888989;
  margin: 2px 0;
}

.bold {
  font-weight: 800;
}

.large {
  height: 10px;
}

.large, .medium {
  background-color: black;
  border: 0;
}

.medium {
  height: 5px;
}

.small-text {
  font-size: 0.85rem;
}

.calories-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.calories-info h2 {
  margin: 0;
}

.left-container p {
  margin: -5px -2px;
  font-size: 2em;
  font-weight: 700;
}

.calories-info span {
  margin: -7px -2px;
  font-size: 2.4em;
  font-weight: 700;
}

.right {
  justify-content: flex-end;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36

Challenge: Learn Typography by Building a Nutrition Label - Step 43

Link to the challenge:

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

3

what happens is that the div that has the class daily-value small-text the last element p asks me to enclose both total fat, 8g and 10% in a but when doing so I get an error, I don’t understand what happens , Might you help me?

4

There are a few issues so we can go one by one. The first part is " Total Fat in a span element with the class of bold"

You have this, and there is no class of bold in this span

<span>Total Fat</span>

Next step is " Wrap the text 10% in another span element with the class of bold"

You have this, and there is not class of bold

<span>10%</span>

The final part is " Finally, nest the Total Fat span element and the text 8g in an additional span element for alignment."

And you have this:

<span class="bold"><span>Total Fat</span></span>

the first problem is you have a class of bold on the outside span, but it should be on the inside. Next, you only put the second span around “total fat” when it needs to go around “total fat” and 8g.

Need to fix all three parts

5

What you tell me is wrong, the real solution corresponds to placing the spans correctly, freecodecamp is very strict about it but it bothers a bit

6

I managed to solve the problem, I will leave it here solved for future students who have the same doubt.
the code should be written after

What you have to keep in mind is that before 8g, there must be a space, and otherwise I don’t think there is a problem

7

I removed the solution

We dont want to leave solutions for the challenges on the forum. We want anyone going through the challenges to solve it themselves, if they are able to just look up the answer then they aren’t learning

1 Like
8

I understand, it’s understandable

1 Like
9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.