Learn Typography by Building a Nutrition Label - Step 47

mayorrex · December 14, 2022, 12:40pm

Tell us what’s happening:
Describe your issue in detail here. I have added no-divider to both classes but the code is not still passing me to the next level. what do I do please?

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 class="right">2/3 cup (55g)</span></p>
      </header>
      <div class="divider lg"></div>
      <div class="calories-info">
        <p class="bold sm-text">Amount per serving</p>
        <h1>Calories <span class="right">230</span></h1>
      </div>
      <div class="divider md"></div>
      <div class="daily-value">
        <p class="right bold no-divider">% Daily Value *</p>
        <div class="divider"></div>
        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
      </div>
    </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;
}

.divider {
  border-bottom: 1px solid #888989;
  margin: 2px 0;
  clear: right;
}

.bold {
  font-weight: 800;
}

.right {
  float: right;
}

.lg {
  height: 10px;
}

.lg, .md {
  background-color: black;
  border: 0;
}

.md {
  height: 5px;
}

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

.calories-info h1 {
  margin: -5px -2px;
  overflow: hidden;
}

.calories-info span {
  font-size: 1.2em;
  margin-top: -7px;
}

.indent {
  margin-left: 1em;
}

.daily-value p {
  border-bottom: 1px solid #888989;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; 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 47

Link to the challenge:

adammuhammadnu92 · December 14, 2022, 1:06pm

You probably made some unnecessary deductions. What was the error message?

DobarBREND · December 14, 2022, 2:07pm

Your code is correct. It passed on my side.
Restart the step. Do it all again, and if it doesn’t pass, follow the note:
“Note: Some browser extensions, such as ad-blockers and dark mode extensions can interfere with the tests. If you face issues, we recommend disabling extensions that modify the content or layout of pages, while taking the course.”

mayorrex · December 14, 2022, 12:18pm

Tell us what’s happening:
Describe your issue in detail here. I have added the class “no-divider” to the class of the p element with the text "% Daily value * " but the code is still not moving me to the next level. I need help please.

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 class="right">2/3 cup (55g)</span></p>
      </header>
      <div class="divider lg"></div>
      <div class="calories-info">
        <p class="bold sm-text">Amount per serving</p>
        <h1>Calories <span class="right">230</span></h1>
      </div>
      <div class="divider md"></div>
      <div class="daily-value">
        <p class="right bold no-divider">% Daily Value *</p>
        <div class="divider"></div>
        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
        <p class="indent">Saturated Fat 1g <span class="bold right">5%</span></p>
      </div>
    </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;
}

.divider {
  border-bottom: 1px solid #888989;
  margin: 2px 0;
  clear: right;
}

.bold {
  font-weight: 800;
}

.right {
  float: right;
}

.lg {
  height: 10px;
}

.lg, .md {
  background-color: black;
  border: 0;
}

.md {
  height: 5px;
}

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

.calories-info h1 {
  margin: -5px -2px;
  overflow: hidden;
}

.calories-info span {
  font-size: 1.2em;
  margin-top: -7px;
}

.indent {
  margin-left: 1em;
}

.daily-value p {
  border-bottom: 1px solid #888989;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; 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 47

Link to the challenge:

DobarBREND · December 14, 2022, 12:22pm

Add no-divider class for " % Daily Value * and **Saturated Fat 1g 5%** elements""

<p class="" ....

You have added a ‘no-divider’ class just for "% Daily Value ".

kai1 · December 14, 2022, 12:24pm

You have made some unnecessary changes in the code, kindly reset the code and perform the steps again.

adammuhammadnu92 · December 14, 2022, 12:24pm

You have done it for "% Daily value . Left with **Saturated Fat 1g 5%**

mayorrex · December 14, 2022, 12:29pm

I just added the class of “no-divider” to **Saturated Fat 1g 5% *** but is still not passing me.

adammuhammadnu92 · December 14, 2022, 12:30pm

Could you post your code so far and the error message

mayorrex · December 14, 2022, 12:37pm

% Daily Value *

Total Fat 8g10%

Saturated Fat 1g 5%

adammuhammadnu92 · December 14, 2022, 12:47pm

I mean your updated html code, which apparently isn’t passing

mayorrex · December 14, 2022, 12:52pm

% Daily Value *

Total Fat 8g10%

Saturated Fat 1g 5%

mayorrex · December 14, 2022, 12:55pm

I don’t know, if I copy the code and paste, when I send it, it brings out different thing from what pasted.

adammuhammadnu92 · December 14, 2022, 12:59pm

There is even a copy button on the html you posted here initially. Just copy it and paste as a reply then add whatever update you added in the challenge

mayorrex · December 14, 2022, 1:07pm

<div class="daily-value">
        <p class="right bold no-divider">% Daily Value *</p>
        <div class="divider"></div>
        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
      </div>

adammuhammadnu92 · December 14, 2022, 1:28pm

What you have added “no-divider” for the p with % Daily Value *, do the same for p with Saturated fat 1g .

Also you took out sm-text from the div before the p, its spposed to have a class of daily-value sm-text not daily-value

hbar1st · December 14, 2022, 2:11pm

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.

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

hbar1st · December 14, 2022, 2:32pm

your code looks like this:

<div class="daily-value">
        <p class="right bold no-divider">% Daily Value *</p>
        <div class="divider"></div>
        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
      </div>

and the original code was:

      <div class="daily-value sm-text">
        <p class="right bold">% Daily Value *</p>
        <div class="divider"></div>
        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
        <p class="indent">Saturated Fat 1g <span class="bold right">5%</span></p>
      </div>

As someone else already pointed out, you seem to have changed more than what was needed. For eg. you removed the sm-text class from the first line (the div)
You can reset the code and try again.
Focus on adding only. (not removing) and Find the elements that are mentioned to modify.

mayorrex · December 16, 2022, 1:41pm

Thank you very much. I apprciate.

mayorrex · December 16, 2022, 1:42pm

Thanks a lot. I appreciate