The p element should contain a no-divider

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 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 sm-text">
      <p class="right bold" type="no-divider">% Daily Value *</p>
      <div class="no-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 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Step 47

Link to the challenge:

2

You want to add the no-divider class to this p element. Right now you have added the attribute type with the value no-divider. You already have two classes (right and bold) added to this p element. You just want to add a third one (no-divider) to it.

You’ll do the same thing for the other p element as well.

3

don’t seem to understand you

4

Can you explain a little more about what you don’t understand?

5

the no-divider i tried putting it in an existing class and it didn’t work

6

You’ll need to show us what you did so we can see it for ourselves. 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.

7

Screenshot (37)
Screenshot (37)1366×768 138 KB

1 Like
8

Please paste your HTML in here instead of using a pic.

It doesn’t look like you’ve made any changes from the original HTML you gave us above. Again, you don’t want to add a new type to the p element, you want to add another class to the existing class attribute.

9

well I made some changes which is adding a no-divider- https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-typography-by-building-a-nutrition-label/step-47

10

Again, you’ll need to paste your most updated HTML in here so we can see what you did. Please follow my instructions above to do that.

11

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