Step 33 Build a Nutritional Label

HTML-CSS
1

Hi guys :blush:

I trust you’re having a lovely day so far.

May you kindly please assist.

Problem Statement:

Below your .small-text element, create a new p element with the text Calories . Also below the .left-container element, create a new span element with the text 230.

 <div class="calories-info">
      <div class="left-container">
        <span>230</span>
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories</p>
      </div>
    </div>

Hint:

Your span element should come after your .left-container element.

Am I missing something?

:pray:t6:

2

Oh, link to the challenge:

Learn Typography by Building a Nutrition Label: Step 33 | freeCodeCamp.org

:sunflower:

3

Okay, I seem to have cracked the “Span” element.

However, there’s another issue which now makes me think there’s probably a glitch.

Here’s my solution/code so far:

<div class="calories-info">
      <div class="left-container">
        <span>230<span>
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories</p>
      </div>
        </div>

Hint:

Your p element should have the text Calories.

Am I missing something?

Is that not the right way to create a “p” element?

I’m also not sure why the “span” element is correct this time, is it not supposed to have a back slash (/) to close it off?

4

the span element should come -after- your .left-container
but you have placed it -inside- the .left-container

5

I actually tried it the way you’re suggesting and there was an error message still.

You mean this way :point_down:t5::

<div class="calories-info">
      <div class="left-container"><span>230</span>
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories</p>
      </div>
        </div>

So, it passed when I excluded the backslash (/), which I do not understand. But now the issue is with my “p” element. Please see above.

6

you span 230 element should be -below- the .left-container not -inside- it.
You still have it inside.

Here’s an example of the difference between inside and below.

<div>
  <p>inside</p>
</div>

and

<div></div>
<p>outside and below</p>
7

Hi guys,

Posted a topic on here yesterday regarding the Nutritional Label challenge. Unfortunately, I 'm still stuck :pleading_face: :face_with_diagonal_mouth:

If you guys may kindly please help :pray:t6:

I have tried everything suggested previously and it still won’t budge.

So, I will start over with my initial solution, followed by all the other ways I have tried to solve it as attached below :point_down:t5:

Problem Statement:

Step 33

Below your .small-text element, create a new p element with the text Calories. Also below the .left-container element, create a new span element with the text 230.

My initial solution:

  <div class="divider large"></div>
     <div class="calories-info">
      <div class="left-container">
        <span>230</span>
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories</p>
      </div>
      </div>

  <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>
      </div>
     <span>230</span>

<div class="divider large"></div>
     <div class="calories-info">
      <div class="left-container">
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories<span class="right">230</span></p>
      </div>
      </div>

<div class="divider large"></div>
     <div class="calories-info">
      <div class="left-container">
        <h2 class="bold small-text">Amount per serving</h2>
      </div>
      </div>
       <p>Calories<span class="right">230</span></p>
  </div>

Link to the challenge:

Learn Typography by Building a Nutrition Label: Step 33 | freeCodeCamp.org

Would really appreciate it :pray:t6:

8

Ok, your issue is the placement of your <span> element.

This means that your <span> should be placed directly below the closing tag of the .left-container element.

As you’ve made several changes to the code, I’d suggest resetting the lesson, adding your <p> element again and then putting the <span> directly below the closing </div> tag which belongs to the .left-container element.

9

In this code, you only need move the <span> down to where I indicated and you should pass the challenge.

1 Like
10

Oh, my word :exploding_head:

And just like that, I’ve passed the challenge!

Thank you so much :pray:t6: I really appreciated it!

:rose:

1 Like
11

This solution has helped me pass my challenge too, thank you so much.

1 Like