Learn Typography by Building a Nutrition Label - Step 33

HTML-CSS
1

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="calories-info">
      <div class="left-container">
        <span text="230"></span>
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories</p>
      </div> 
    </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/109.0.0.0 Safari/537.36

Challenge: Learn Typography by Building a Nutrition Label - Step 33

Link to the challenge:

1 Like
2

Same Problem here. Tells me " Your span element should come after your .left-container element." and " Your p element should have the text Calories." But with this code, those problems should not appear.

3

may i ask for the answer?

4

I don´t know the answer. I wanted to post the same issue.

5

If you have a question about a specific challenge as it relates to your written code for that challenge, and you’ve tried to solve it at least 3 times so far and still need some help, just click the Ask for Help button located on the challenge (it looks like a question mark).
This button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

6

you have placed the span element -inside- the .left-container instead of placing it below it.

Also you must not create an attribute called ‘text’.
Instead you must place the text given which is 230 between the opening and closing tags.

7

The Problem is, that the hints are not correct i think. Therefore i guess, the code can´t be correct. So i can´t pass this step.

8

please open your own topic if the help given to others has not helped you.
Please -stop- posting here in this thread unless you aim to provide help to the original poster.

9

and what about "text of element p should be “Calories”? but it is Calories

10

please create your own topic with your code etc and someone can help you there.

1 Like
11

Did you manage to solve exercise 33? I think I have the same problem

12

If you have a question about a specific challenge as it relates to your written code for that challenge, and you’ve tried to solve it at least 3 times so far and still need some help, just click the Ask for Help button located on the challenge (it looks like a question mark).
This button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

13

I did, yes. The problem above solves it automatically. Just fix the problem with the span above. The hint with the “p-element” is just irritating. =)

14

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.