Span font issueBuild a Nutritional Label - Step 45

hi. doing the span class for the next section of the project. now not liking it, as then copied and pasted the code, and then changed the text. but still not liking it.
so how to pass.
marvin.
ps: pasting my error message, the step and code below.

https://www.freecodecamp.org/learn/full-stack-developer/workshop-nutritional-label/step-45```
type or paste code here



`<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800">
  <link rel="stylesheet" href="styles.css">
  <meta charset="UTF-8">
  <title>Nutrition Label</title>
</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>

    <div class="daily-value small-text">
      <p class="bold right">% Daily Value *</p>
      <div class="nutrient">
        <p>
          <span><span class="bold">Total Fat</span> 8g</span>
          <span>10%</span>
        </p>
        <p>
          <span><span class="bold">Saturated Fat</span> 1g</span>
          <span>5%</span>
        </p>
              </div>
      <div class="divider small"></div>
      </div> 
</body>
</html>
`You should create a new p element below your element with the Total Fat text.label/step-45
  • 2nd span element is missing “classname” from newly added “Saturated Fat” text

happy coding :slight_smile:

hi, did that, but still not liking it. so pasting the error and my code.
how do i get this to work.
marvin.
ps: got an example code so i can hear with my screen reader. i do have a p element below the total fat paragraph. so why is it not passing.
frustrated.
totally blind, so cannot see the code sample up above in the preview project.
so what am i doing wrong.
marvin.

You should create a new p element below your element with the Total Fat text.

type or paste code herehttps://www.freecodecamp.org/learn/full-stack-developer/workshop-nutritional-label/step-45

type or paste code here

    <p class="fat">Includes 1g Saturated Fat</p>
    <p>
      <span><span class="bold">Saturated Fat</span> 1g</span>
      <span class="bold">5%</span>
    </p>

then two closing divs below that.
so do i then get this to pass. why is it asking that.
frustrated.
dont understand.
help.
marvin.

hi, heres the updated code.
so how to fix.
marvin.
ps: did try then adding a p class below the total fat.
did not like that.
so how to fix since you have the rest of my html code to play around with.
and i dont understand what it is asking. do have a total fat text in the paragraph. dont understand.
please explain.
help?
ps: pasting my updated code below.
frustrated.
tried about 30 times.
still not passing.
marvin.

type or paste code here
                <p>
          <span><span class="bold">Saturated Fat</span> 1g</span>
          <span class="bold">5%</span>
        </p>
      </div>

remove all the extra spaces and going to new line, these tests are strict

hi tried that. still not working.
so pasting the error below and my code.
how to get this to work.
what am i doing wrong?
and how to get this to pass.
what code should i put in.
this is very frustrating. easy for you sighted guys. but extremely frustrating for a blind person using a screen reader.
can you help.
show me how to get htis to work.
marvin.
ps: pasting below.

type or paste code here

You should create a new `p` element below your element with the `Total Fat` text.`Preformatted text`

type or paste code here


`Preformatted text````
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Nutrition Label</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800">
  <link rel="stylesheet" href="styles.css">
</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>

    <div class="daily-value small-text">
      <p class="bold right">% Daily Value *</p>
      <div class="nutrient">
        <p>
          <span><span class="bold">Total Fat</span> 8g</span>
          <span>10%</span>
        </p>
                <p>
<span><span class="bold">Saturated Fat</span>1g</span>
<span class="bold">5%</span>
        </p>
        
      </div>
      <div class="divider small"></div>
    </div>
    </div>
  </body>
</html>
ps::: did remove all the space and then a new line.
still not liking it.
so please help me out.
driving me nuts.
marvin.

you need to add a space before 1g and put the whole p on the same line

hi. still no go.
will paste the error and my updated code.
so how to get this to pass.
so what extra code do i need. put a space next to 1 g and then put the <p on each line.
marvin.
ps: pasting below.
You should create a new p element below your element with the Total Fat text.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Nutrition Label</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800">
  <link rel="stylesheet" href="styles.css">
</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>

    < class="daily-value small-text">
      <p class="bold right">% Daily Value *</p>
      <div class="nutrient">
        <p>
          <span><span class="bold">Total Fat</span> 8g</span>
          <span class="bold">10%</span>
        </p>
<p><span><span class="bold">Saturated Fat</span></span></div>p> 1g</span></p>
  <p></p><span class="bold">5%</span></p>
      </div>
    </div>
  </div>
</body>
</html>

maybe you need to reset the step, this element does not have an element name anymore

this class is not one of this project

and there are other various issues like this

the 5% is outside the p element here

hi, okay tried to clean up and fix the errors. but still not liking it. what am i missing and to get this to fix.
why is it asking me to add a p element underneath the total fat.
i dont understand, please explian and tell me how to get this to work and what extra code i need.
was trying to get this and so was researching on google to try to see if my code matched up with some one else. and someone similar.
so, okay trying my best.
can you help.
it is not passing and dont know why and dont understand. help a blind screen reader user. tried about 40 or more times and yes have reset the lesson a bunch of times.
help.
and pasting my updated code below.
how to get this to work.
i am totally stumped.

type or paste code here

type or paste code here

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Nutrition Label</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800">
  <link rel="stylesheet" href="styles.css">
</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>
    <div class="daily-value small-text"></div>
      <p class="bold right">% Daily Value *</p>
        <p>
          <span><span class="bold">Total Fat</span> 8g</span>
          <span class="bold">10%</span>
        </p>
<p><span><span class="bold">Saturated Fat</span></span></div>p> 1g</span></p>
  <p><span class="bold">5%</span></p>
      </div>
    </div>
  </div>
</body>
</html>

[quote="BlindVisionMan, post:8, topic:752848"]
< class="daily-value small-text"
[/quote]

things are going worse

You should really reset the step

hi okay reset the step. now what next? and what to fix in my local copy. easier trying to move it around on the editor. so what to fix. and then to get this to work. so whats worse. and dont want to start again from stratch. means have to then go through all the steps again. dont want to do that. so how to get this to work. so how to go from where i am at the moment.
or just to hand code it maybe on the editor with the jaws virtual cursor turned off.
please advice.
how to get this to work.
marvin.

hi. had extra spans and an extra p in the saturated fat span. so fixed that up. but now still not working.
so need your help to get htis to work.
marvin.

delete your local copy and copy the whole code from the editor after resetting the code

then you should post again your current code, I can’t help if you don’t share your code

hi. okay deleted my local copy. selected and copied it from the editor once i had reset the step, then copied to my local copy and then saved it. so will paste the current version and then go from there.
marvin.
ps: pasting below.

type or paste code here

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Nutrition Label</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800">
  <link rel="stylesheet" href="styles.css">
</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>
    <div class="daily-value small-text"></div>
      <p class="bold right">% Daily Value *</p>
        <p>
          <span><span class="bold">Total Fat</span> 8g</span>
          <span class="bold">10%</span>
        </p>
<p><span><span class="bold">Saturated Fat</span> 1g</span></p>
  <p><span class="bold">5%</span></p>
      </div>
    </div>
  </div>
</body>
</html>

the text Saturated Fat 1g 5% is inside two p elements, there should not be two p elements, it should be all inside a single p element

hi. okay so put it in one p tag with two span elements inside. still not passing. so is it the spacing. and please explain what it means to add a p element to the text total fat below.
i dont understand.
so heres my updated code. and how to get it to pass.
what am i missing.
how do i get this to pass.
frustrated.
tried about 50 times or more.
this is driving me nuts. maybe theres is not a solution to this issue. wonder if my code is the problem, or the vallidator is having an issue.
please help me out and explain to me whats happening and why it wont pass and how to fix.
marvin.
ps: so pasting below. been trying to get this to work for the past 4 days and also having covid and not feeling well on top of that.
marvin.

type or paste code here

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Nutrition Label</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800">
  <link rel="stylesheet" href="styles.css">
</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>
    <div class="daily-value small-text"></div>
      <p class="bold right">% Daily Value *</p>
        <p>
          <span><span class="bold">Total Fat</span> 8g</span>
          <span class="bold">10%</span>
        </p>
<p> 
  <span><span class="bold">Saturated Fat</span> 1g</span>
  <span class="bold">5%</span> 
</p>
      </div>
    </div>
  </div>
</body>
</html>

now put everything on the same line, from the opening <p> tag to the closing </p> tag

hi. did this. still not liking it.
so then paste the error.
so how to get this to work.
maybe need the sample code to then hear how this is done.
sorry.
not working.
so pasting the error message and my updated code.
so the p and the nested spans and the p all on one line.
but keep getting this error.
why?
please explain?
you never explained what this error message doesplease explain.
pasting below.
frustrating.
marvin.

You should create a new p element below your element with the Total Fat text.

type or paste code here

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Nutrition Label</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800">
  <link rel="stylesheet" href="styles.css">
</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>
    <div class="daily-value small-text"></div>
      <p class="bold right">% Daily Value *</p>
        <p>
          <span><span class="bold">Total Fat</span> 8g</span>
          <span class="bold">10%</span>
        </p>
<p><span><span class="bold">Saturated Fat</span> 1g</span><span class="bold">5%</span></p>
      </div>
    </div>
  </div>
</body>
</html>

hi. got it to pass. had one div that was not closed propperly. so got it fixed.
marvin.