Learn Typography by Building a Nutrition Label - Step 33

HTML-CSS
21

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.

2 Likes
22

Post the solution again. At this point I want to move on and waste no more time on this.

2 Likes
23

Posting the solution is not permitted.

1 Like
24

So then I quit. Because this has become a huge waste of my time, and a joke.

2 Likes
25

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.

2 Likes
26

I have done that a dozen times. I quit. I am moving to the next lesson.

1 Like
27

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.

1 Like
28

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.

1 Like
29

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.

1 Like
30

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.

  1. 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.

  2. 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.

5 Likes
31

man the span i below the colosing tag of

1 Like
32

A post was split to a new topic: Learn Typography by Building a Nutrition Label - Step 33

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:

1 Like
34

You have deleted the calories-info div. You must not remove or move any of the pre-exsiting code.

1 Like
35

Ok. I restarted the lesson from the beginning and meticulously followed the instructions. I STILL got the error.

1 Like
36

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.

1 Like
37

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>
1 Like
38

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.

1 Like
39

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.

1 Like
40

I didnt delete anything

1 Like