Build a Nutition Label step-43

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
My code on line 31 seems to be correct but will not pass. The preview of the label looks correct. I have checked 2 different posts here on the forum. When I copy their syntax it screws my label. Still, when I try to skip this step it shows the label with the wrong span.
Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
    <div class="menu">
      <main>
        <h1>CAMPER CAFE</h1>
        <p class="established">Est. 2020</p>
        <section>
          <h2>Coffee</h2>
          <article class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
          </article>
          <article class="item">
            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
          </article>
          <article class="item">
            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
          </article>
          <article class="item">
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
        </section>
        <section>
          <h2>Desserts</h2>
          <article class="item">
            <p class="dessert">Donut</p><p class="price">1.50</p>
          </article>
          <article class="item">
            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
          </article>
          <article class="item">
            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
          </article>
          <article class="item">
            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
          </article>
        </section>
      </main>

<!-- User Editable Region -->

      <footer>
       <p>>
         <a href="https://www.freecodecamp.org">"Visit our website"></a>
         </p>
      </footer>

<!-- User Editable Region -->

    </div>
  </body>
</html>

/* file: styles.css */
body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  font-family: sans-serif;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

.established {
  font-style: italic;
}

h1, h2, p {
  text-align: center;
}

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}

h1, h2 {
  font-family: Impact, serif;
}

.item p {
  display: inline-block;
}

.flavor, .dessert {
  text-align: left;
  width: 75%;
}

.price {
  text-align: right;
  width: 25%
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/113.0

Challenge: Learn Basic CSS by Building a Cafe Menu - Step 64

Link to the challenge:

2

Don’t know why. this is not the right code for what I am working on. Sorry guys and gals.
Should have been Nutitional Label step-43.

3

Kindly refer to the correct lesson,your code is on Cafe Menu lesson while your title reads the nutritional label lesson,this causes a lot of confusion.

4

Welcome to FCC Forum.
No worries! We all make mistakes. :slight_smile:

Could you please post the code for us to look at for the Nutrition Step 43?
As well, sometimes, a browser extension or just a browser are the cause of issues when the coding is correct. When I know mine is correct, I check for an extension first and disable it, and try another browser for submitting the lesson, if the extension is not a problem. Happy coding!

5

I posted it in a new post. its the last line. As I said in this post the code won’t pass and I’ve lookedon the forum for answers.I have tried the code shown on the forum that must have passed but it won’t for me!

1 Like
6

Tell us what’s happening:
Describe your issue in detail here.

**Can’t pass on the Total Fat line.

<!-- 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; rv:109.0) Gecko/20100101 Firefox/113.0

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

Link to the challenge:

7

Please Tell us what’s happening in your own words.

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

Also, the more you say, the more we can help!

8

The new post was unlisted as a duplicate post even though the wrong code was listed.
It’s really unimportant if I solve this asI can skip the whole lesson. I don’t see where or how to post the code. The new post had it.

9

You don’t need a span around 8g by itself. There should be span that goes around total fat, a span that goes around total fat and 8g then a span around 10%. You need to remove the span thats just around 8g, and add another span that goes around both total fat and 8g

1 Like
10

Cody has provided the solution for the issue.

If it still does not accept it, I suggest checking if there is an extension on the browser causing the issue. I have found that at times this can create the issue, or sometimes, the browser itself. And, it is all random by the browser.

11

I just tried your solution and when done there is no space between Total Fat and 8g. I get the error of I need 3 span elements

12

Welcome Chuck!

The third span should not be only around the 8g. It needs to include the original span around the Total Fat and close behind the 8g.

Example: < span>< span>Dietary Info< /span> 100 calories< /span>

Please do not change the text? The above is just an example of how the code should appear minus spaces I needed to add to post the example.

I hope this helps you.

13

When the 8g text is combined in the Total Fat span it makes the 8g bold. The label shows no bold 8g. Direction says an additional span for 8g.
On the label when you start this section there is no space between Total Fat 8g. Total fat is bold 8g is not. How do I add the 8g and not have it come out bold?

14

I apologize for my response time. I was checking it in my own lesson.

It should not be showing as bold, too, if it is wrapped as suggested, Chuck. Sorry!
The first closing span element should be directly after the Total Fat, as you have it. The second closing span element should be after the 8g. This should prevent the bold from carrying through to the 8g.
< p>< span > < span class=“italic” > Total Fat< /span > 8g< / span> should display the Total Fat in italic, not the 8g.
The above is strictly for an example.

15

I hope you did not think I was saying your were doing it wrong. I found I was having difficulty getting my correct code to work too. I needed to try another browser to get it to work.
Please let us know if there is still an issue with it? We will figure out a way to help you. :slight_smile:

16

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