Feni
February 15, 2023, 1:10pm
1
Hi guys
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?
Feni
February 15, 2023, 1:11pm
2
Feni
February 15, 2023, 2:21pm
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?
hbar1st
February 15, 2023, 2:22pm
4
the span element should come -after- your .left-container
but you have placed it -inside- the .left-container
2 Likes
Feni
February 15, 2023, 2:27pm
5
I actually tried it the way you’re suggesting and there was an error message still.
You mean this way :
<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.
hbar1st
February 15, 2023, 2:40pm
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>
4 Likes
Feni
February 16, 2023, 11:47am
7
Hi guys,
Posted a topic on here yesterday regarding the Nutritional Label challenge. Unfortunately, I 'm still stuck
If you guys may kindly please help
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
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
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.
In this code, you only need move the <span>
down to where I indicated and you should pass the challenge.
1 Like
Feni
February 16, 2023, 12:25pm
10
Oh, my word
And just like that, I’ve passed the challenge!
Thank you so much I really appreciated it!
1 Like
This solution has helped me pass my challenge too, thank you so much.
1 Like
<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>
thanks so much for the written out difference of below vs inside. this helped a lot!!!
1 Like