Learn Typography by Building a Nutrition Label - Step 43

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>
    <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>
    <div class="divider medium"></div>

<!-- User Editable Region -->

    <div class="daily-value small-text">
      <p class="bold right">% Daily Value *</p>
      <div class="divider"></div>
      <p><span class="bold">Total Fat </span> <span>8g</span> <span class="bold">10%</span></p>
    </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;
}

.medium {
  height: 5px;
}

.small-text {
  font-size: 0.85rem;
}

.calories-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.calories-info h2 {
  margin: 0;
}

.left-container p {
  margin: -5px -2px;
  font-size: 2em;
  font-weight: 700;
}

.calories-info span {
  margin: -7px -2px;
  font-size: 2.4em;
  font-weight: 700;
}

.right {
  justify-content: flex-end;
}

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 43

Link to the challenge:

2

Don’t include spaces between the text and the span tags. For example, there should be no space between the word Fat and the closing span tag.

You weren’t ask to just wrap 8g in a span. You were asked to wrap Total Fat 8g in a span. This would also include any spans already wrapping those words, such as the span around Total Fat.

3

At this time you have two spaces between Fat and 8g when they only wanted one

Also they didn’t want you to wrap 8g by itself in a span.
They wanted Total Fat 8g to be in that last span

4

please can you give me example because I doing what you telling me but still getting the same problem

5

Just reduce the space so that there is exactly one between the words.
And move the 8g span opening tag so it goes to an appropriate spot on the left of the word Total.

6

please can you give me example because I doing what you telling me but still getting the same problem so if can help me I will appreciate your a lot

7

Please paste your updated HTML in here so we can see what you have tried. To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

8

They are asking for three span and doing that will not give me three span
For example:
<p><span class="bold">Total Fat</span><span>8g</span><span class="bold">10%</span></p>

9

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

10

Your spacing is wrong still. You need a space between each word.

Also the 8g should not be alone inside the span. Both total fat and 8g should be in the third span

11

If you say total fat and 8g should be in the third span then what will be in a second and first span

12

What you did for the first and second was correct (except for the spaces)

The only thing missing now is the correct placement of the last span

13

Hey, please you really need to help me on this question 43 because I have try all method on this but no way

14
  • delete the blank space after the word “Fat”
  • there is no instruction to wrap “8g” in span element, so delete those tags.
  • now, “Total Fat” with its span tags (that surround it) and “8g” together should be surrounded with another pair of span tags.
15

TotalFat8g10%

Am finding it very difficult to understand this problem

16

Read again and again, follow the instructions given here and don’t give up. All help that you need has already been posted here. Now it is your turn to show good will to learn. From January up to now you have had a lot of time to research on this issue.

17

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