Learn Typography by Building a Nutrition Label - Step 43

HTML-CSS
1

Tell us what’s happening:
after following all instruction it still giving ** One span element should wrap the text Total Fat .** error

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>
    <p class="bold right"> % Daily Value *</p>
      <div class="divider"></div>
    

<!-- User Editable Region -->

    <div class="daily-value small-text">
        <p><span class="bold"> Total Fat </span> <span class="bold"> 10% </span> <span> Total Fat 8g</span> Total Fat 8g 10%</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/109.0.0.0 Safari/537.36

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

Link to the challenge:

2

I would restart the step to get the original HTML back. Then concentrate on one thing at a time. First thing:

“After your last .divider element, create a p element and give it the text Total Fat 8g 10%.”

Your new p element should come directly after the last .divider element. Currently, you have wrapped the p element in another div which you weren’t asked to do.

Once you have the p element in place it should stay there. And the text should stay in the same order. The remaining steps are just wrapping things in spans.

Also, when you wrap text in a span do not include spaces between the opening span tag and the text or between the closing span tag and the text.

3

where to add the span element in the p element or after the p element

4

Which span? Please be a little more specific.

5

After your last .divider element, create a p element and give it the text Total Fat 8g 10% . Wrap Total Fat in a span element with the class set to bold . Wrap 10% in another span element with the class set to bold . Also wrap the words Total Fat 8g in an additional span element for alignment. this span

6

This is just a repeat of the instructions, which I can read. Please tell me exactly which span you are having trouble with. Also, it would help if you pasted your current HTML in here so I can see what you have tried.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

7

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