Learn Typography by Building a Nutrition Label - Step 42

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
pls help.
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"></div>
       <p class="right bold">% Daily Value *</p>
       <p class="daily-value"></p>
       <div class="divider">
   <p><span class="bold">Total Fat</span>
   <span class="bold right"> 8g 10%</span> </p>
</div>


     </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;
}

   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

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

Link to the challenge:

2

Hello there.

Do you have a question?

If so, please edit your post to include it in the Tell us what’s happening section.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more information you give us, the more likely we are to be able to help.

4

kindly assist to fix this code please

         <p>
            <span class="bold">Total Fat</span> 
            <span>8g</span>
            <span class="bold">10%</span>
         </p>
5

You would have to describe the problem in detail. You haven’t said anything

6

According to the instructions below, am not sure why the challenge still gives few errors like this one( One span element should wrap the text Total Fat .)

Step 43

After your last .divider element, create a p element and give it the text Total Fat 8g 10%. Wrap Total Fat in a span element with the class set to bold. Wrap 10% in another span element with the class set to bold. Also wrap the words Total Fat 8g in an additional span element for alignment.

         <p>
            <span class="bold">Total Fat</span> 
            <span>8g</span>
            <span class="bold">10%</span>
         </p>
7

You have correctly added spans to create bold text for ‘Total Fat’ and ‘10%’. However, your third span element should wrap around ‘Total Fat 8g’, not just ‘8g’. This means that the span tags will also wrap around the span tags you previously added to ‘Total Fat’. So you will have a span within a span.
You can fix this simply by moving the opening span tag from the beginning of ‘8g’ to the beginning of the p element.

8

Like use one span for (Total Fat 8g) the response is the p should have 3 span elements

     <p>
        <span class="bold"> Total Fat 8g</span>
        <span class="bold"> 10%</span>
      </p>
9

You should leave the span around ‘Total Fat’ which bolds that text. You added a third span which only wraps around the text ‘8g’. It should also wrap around ‘Total Fat’ (including wrapping around the span element which is already there).
So, yes, you will have three span elements.

EXAMPLE:

<p>I like <span class="bold">cheese</span> but not <span>smelly cheeses like <span class="bold">stinking bishop</span></span>.</p>

I nested a span within a span… that’s what you need to do.

10

noted let me try that

11

Finally, it’s working ! Thanks everyone for the reply.

12

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