Learn Basic CSS by Building a Cafe Menu - Step 52

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
hi I was wondering if anyone could tell me how to add a second class on the same line as the first class

  **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">
    <header>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
    </header>
    <main>
      <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 {
text-align: left;
width: 75%;
}
.flavor .dessert

.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/104.0.0.0 Safari/537.36

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

Link to the challenge:

2

Hey! Can you tell us a bit about the problem you’re facing. Learning to describe and solve problems plays a big role in a developers life and it also makes it easier for others to help you here on the forums.

3

I need help to learn how to add a second class on the same line .flavor {
like here:
text-align: left;
width: 75%;
}
they want me to add the class dessert to this code and I have tried and tried and the when it eventually wasn’t working I looked on google but I still haven’t been able to make it work

4

To add a second class in CSS, so the properties apply to both the first class and second:

.class, .class {
Property: value;
}

In your example, i believe this would solve your issue

[Removed by moderators]
2 Likes
5

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

6

Oh, That makes sense.
Just got in on the forum, so i hadn’t considered that.
Thanks, will keep in mind the next time.

2 Likes
7

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

}
It works for everyone else, not me
Are you pass this step so far?

8

You’re missing a , between your selectors which is why its not working

In the future, please create your own topic when you have specific questions about your own challenge code. Only respond to another thread when you want to provide help to the original poster of the other thread or have follow up questions concerning other replies given to the original poster.

The easiest way to create a topic for help with your own solution is to click the Ask for Help button located on each challenge. This will automatically import your code in a readable format and pull in the challenge url while still allowing you to ask any question about the challenge or your code.

Thank you.

1 Like
9

this is unbelievable… i need to add another class with both classes which indicates for what i am adding into

10

You only need to add a , between the two selectors for it to work.

11

already solved, but tnx

12

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