Learn Basic CSS by Building a Cafe Menu - Step 51

HTML-CSS
1

I don’t understand what happend

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>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>
        </section>
      </main>
    </div>
  </body>
</html>

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

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

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
}

.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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

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

Link to the challenge:

1 Like
2

Your .dessert class is wrongly placed

3

The instruction is: " Since the flavor class selector already has the properties you want, just add the dessert class name to it."
The rule for adding more than one class with the same properties and values is:

.class1, .class2, .class3 {
property: value;
property: value;
}
16 Likes
4

I think they should add your answer to their hint, i got stuck here too

1 Like
5

Me too! But I was closer than TS: I just didn’t insert a comma between class selectors.
They should tell us before asking.

1 Like
6

I was stuck here as well, here is what they failed to mention, with the selectors you have to include a comma like this .flavor, .dessert
No where is it mentioned that a comma has to be used, even using ChatGPT it tells you to just put them together like this, .flavor.dessert
which is why it kept saying it was incorrect. The take away here. just add a comma between selectors haha

4 Likes
7

It is mentioned in an earlier lesson. FCC doesn’t like to repeat things to keep the step instructions concise.

1 Like
8

thank you! was using the semi-colon and that’s why it wasn’t working for me

1 Like
9

Thank you, I realized all I needed was a " , "

1 Like
10

Thank you. I found that I kept missing the comma,which did not help me one bit. I found this post very helpful.

11

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