Learn Typography by Building a Nutrition Label - Step 53

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 no-divider">% Daily Value *</p>
      <div class="divider"></div>
      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
      <div class="divider"></div>
      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
      <div class="divider"></div>
      <p><span class="bold">Cholesterol</span> <span>0mg</span> <span class="bold">0%</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;
}

.indent {
  margin-left: 1em;
}

.daily-value p:not(.no-divider) {
  border-bottom: 1px solid #888989;
}

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 Edg/109.0.1518.55

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

Link to the challenge:

The hint says ‘Your first span Cholesterol should have the class attribute set to bold’. Where did I go wrong?

1 Like
2

There shouldn’t be a span wrapped just around 0mg. Read the last sentence of the instructions carefully:

“Also wrap Cholesterol 0mg in an additional span element for the alignment.”

That span should include both Cholesterol and 0mg.

3

Now it says the p element should have 3 span elements. I don’t understand where to put the third span element.

4

The third span element wraps around the text Cholesterol (which includes the span around Cholesterol) and the text 0mg.

Also, if you need further help then it would probably be a good idea to paste your HTML in here so we can see what you are doing.

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.

5 
<p><span class="bold">Cholesterol 0mg</span> <span class="bold">0%</span></p>

When I use this It says i need a third span element.

<p><span class="bold"> <span>Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>

when I use this, It says the first span element should have a class of bold.

6

The bold span should only go around Cholesterol.

7 
 <p><span class="bold">Cholesterol</span> <span>0mg</span> <span class="bold">0%</span></p>

It still says my first span element should have a class of bold. ???

8

Ya, that hint could be worded a little better.

You do have a bold span around Cholesterol. This is correct. Don’t change it.

What you don’t have is a span around both Cholesterol and 0mg as instructed by this sentence:

“Also wrap Cholesterol 0mg in an additional span element for the alignment.”

And remember, Cholesterol includes the bold span wrapped around it.

9

So, just to clarify, I should wrap Cholesterol 0mg in a span element, including the span that is already wrapped around them?

10

Yes. You want a third span that goes around both Cholesterol and 0mg.

11 
<p><span><span class="bold">Cholesterol 0mg</span></span> <span class="bold">0%</span></p>

Now it says 'Your first span element should wrap around the text Cholesterol. ???

12

Now you’ve got both Cholesterol and 0mg in the bold span. You only want Cholesterol in the bold span. Just like you had it above where I said it was correct and you shouldn’t change it. Just make that change and you’ve got it.

13

Oh ok. I went back and worked it from where you said I was correct. I understand now. I think I should call it a night after that mental hiccup. Thanks again.

14

I found it easier to first place the span elements into the line before adding the bold classes, so that it was clearer which span elements span which words.

15

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