It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.
We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.
Post the solution again. At this point I want to move on and waste no more time on this.
Posting the solution is not permitted.
So then I quit. Because this has become a huge waste of my time, and a joke.
You should reset the code and only add the new p and new span. Nothing else should be added or moved.
If I used the exact p and span you wrote, and put them in the correct spots with zero other changes, then the Step passes for me.
I have done that a dozen times. I quit. I am moving to the next lesson.
I suspect you are making changes that are not part of the Step. If you make any extra changes that are not part of the Step, you can prevent the test suite from finding the code you wrote.
Look Im done. I didnt make any changes. I am a step by step type of guy. I am meticulous. Im done. Ive moved on already. I dont care anymore.
Its totally fine to skip steps. I’m just pointing out the issue with unrequested changes because every solution you posted had changes that were not requested by the challenge, and that’s a common issue that will cause otherwise correct code to fail.
I think I can help you as I had an issue with this step as well. Please don’t give up. You may just need to move on and come back to it later or take a break. Hopefully, what I say here will set you in the right direction…fingers crossed! I know it gets frustrating.
You have too many spans in your code for this step. Reset this step by clicking on the arrow that forms a circle or hit the ctrl F5 keys. I see two sets, one right after the left-container and one right after the p element with calories.
Delete one of the span set and move the other one.
****I can’t give you the direct answer but only allowed to guide you.
Everything in-between your div (h2, div calories-info, p calories) are NESTED. If the instructions asked you to NEST, then where you currently have your span with text 230 would be correct. But it’s not correct because it’s not asking you to NEST.
It is not asking you to nest it within your left-container. It is asking you to put it BELOW it. So everything that is supposed to be nested within your (div class left container) acts as one entity. So you would put your span 230 where? not nested within the entity but…
Hopefully this helps you. Let me know if it doesn’t and I can try to help you further.
man the span i below the colosing tag of
A post was split to a new topic: Learn Typography by Building a Nutrition Label - Step 33
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>
<!-- User Editable Region -->
<div class="left-container"><h2 class="bold small-text">Amount per serving</h2></div>
<div class="calories-info"><p>Calories</p><span>230</span></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;
}
.small-text {
font-size: 0.85rem;
}
.calories-info h2 {
margin: 0;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36
Challenge: Learn Typography by Building a Nutrition Label - Step 33
Link to the challenge:
You have deleted the calories-info div. You must not remove or move any of the pre-exsiting code.
Ok. I restarted the lesson from the beginning and meticulously followed the instructions. I STILL got the error.
You got an error because you removed elements that you were not asked to remove.
This is the starting code:
<div class="calories-info">
<div class="left-container">
<h2 class="bold small-text">Amount per serving</h2>
</div>
</div>
You must not touch the delete or backspace buttons at all.
You only need to add this one p element:
and this one span
Any other changes will likely break your code.
If I copy-paste those two elements into the spots requested (after the small-text h2 element and after the left-container div), then the code passes.
Within your .calories-info element, create a div element. Give that div element a class attribute set to left-container . Within the newly created div element, create a h2 element with the text Amount per serving . Give the h2 element a class attribute set to bold small-text .
<div class="calories-info"><div class="left-container"><h2 class="bold small-text">Amount per serving</h2></div>
I don’t understand why you deleted a bunch of line breaks? That just makes your code harder to read. It doesn’t help you accomplish the requirements.
Step 33
Below your
.small-textelement, create a newpelement with the textCalories. Also below the.left-containerelement, create a newspanelement with the text230.
I didnt delete anything