Learn Typography by Building a Nutrition Label - Step 43

Tell us what’s happening:
i have saw all the before solution and changed but still getting 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>

<!-- User Editable Region -->

<div class="daily-value small-text">
  <p class="bold right">% Daily Value *</p>
  <div class="divider"></div>
  <div class="daily-value">
  </div>
  <p>

    <span class="bold"> Total Fat </span>
     <span> 8g </span> 
     <span class="bold right"> 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:

Welcome to our community!

  • you have added another div element with a ‘class’ attribute set to “daily-value”. This is not required here.

Restart step.

-After the last .divider:

<div class="divider"></div>

add the ‘p’ element.

  • Delete the span tags that surround “8g”
  • Surround “Total Fat” with its ‘span’ tags and “8g” with pair of ‘span’ tags.

but if i remove that span it ask for 3 span it shows error if i add like this also
code:

<span>
<span class="bold">Total Fat
</span>8g
</span>
<span>10%
</span>

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

A part of the directions say

“create a p element”

I dont see a paragraph element in the latest code you posted. Be sure to thoroughly go through the directions and make sure you have everything. As you are also missing a class in your last span

<div class="daily-value small-text">
  <p class="bold right">% Daily Value *</p>
  <div class="divider"></div>
  <p>

    <span class="bold"> Total Fat </span>
     8g 
    <span class="bold right"> 10% </span>
  </p>
</div>

this the code I am getting this error
One span element should wrap the text Total Fat .

I see a bunch of extra line breaks.

Don’t add extra line breaks.

Add each span, one at a time, to the requested text, with zero spacing or line break changes

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

now it says you should have 3 span elements

You should have 1 span around “total fat” with the correct class

You need another span that goes around “total fat” and “8g” with no class

You need a span around 10% with the correct class.

These are your three spans

code:

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

error

One span element should wrap the text Total Fat

You still have a lot of weird spacing. Your spans looks correct, but theres too much space between everything

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

is this ok or else could you write the correct code how it looks??

You deleted spaces as you added the spans. You need to delete zero spaces.

Also, the span that you have around only 8g needs to be around the text ‘Total Fat 8g’ (and the Total Fat span).

1 Like

TQ I finally got it

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

this code worked

1 Like

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