Learn Basic CSS - Cafe Menu

HTML-CSS
1

image
image544×758 52 KB

I finished the café course, but once I launched the project in VS Code, the prices weren’t aligning to the right like on FCC. I tried looking up a solution, but all it shows me is the text align code. How do I align it to the right properly?

2

you may not have copied the code in full or you may not have set it up correctly on your machine.
Please post the code you are using (html and css) and we can discuss further.

3

Hi @DesuWRLD

I think VSCode is removing the white space.

Which step is this?

Happy coding

8

Please, post the actual code instead of screenshots. It’s easier for people to help using code.

9 
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="Cafe Menu.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="UTF-8" />
    <title>Cafe Menu</title>
  </head>
  <body>
    <div class="menu">
      <main>
        <h1>CAMPER CAFE</h1>
        <p hr class="established">Est. 2020</p>
        <hr />
        <section>
          <h2>Coffee</h2>
          <img
            src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg"
            alt="coffee icon"
          />
          <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>
          <img
            src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg"
            alt="pie icon"
          />
          <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>
          <article class="item">
            <p class="Dessert">Chocolate Mousse</p>
            <p class="price">$5.00</p>
          </article>
        </section>
      </main>
      <hr class="bottom-line" />
      <footer>
        <p>
          <a target="_blank" href="https://www.freecodecamp.org"
            >Visit our website</a
          >
        </p>
        <p class="address">123 Free Code Camp Drive</p>
      </footer>
    </div>
  </body>
</html>


/* NOTES */
h1,
h2,
p {
  text-align: center;
}
body {
  /* background-color: burlywood; */
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  font-family: sans-serif;
  padding: 20px;
}
/* the ".menu" Sector used to be a "#menu" Sector  */
.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}
.flavor,
.dessert {
  text-align: left;
  width: 75%;
}
.price {
  text-align: right;
  width: 25%;
}
.item p {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 18px;
}
h1,
h2 {
  font-family: Impact, serif;
}
.established {
  font-style: italic;
}
h1 {
  font-size: 40px;
  margin-top: 0;
  margin-bottom: 15px;
}
h2 {
  font-size: 30px;
}
hr {
  height: 3px;
  background-color: brown;
  border-color: brown;
  height: 2px;
}
.bottom-line {
  margin-top: 25px;
}
/* footer */
footer {
  font-size: 14px;
}
a {
  color: black;
}
a:visited {
  color: black;
}
a:hover {
  color: brown;
}
a:active {
  color: brown;
}
.address {
  margin-bottom: 5px;
}
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: -25px;
}
10

The CSS code you provided is different from the final one in the project. If you use the exact code, the code should render the correct thing. It worked for me.

11

you have an autoformatter that is putting these on different lines. You need to use a different css technique for this, or put the paragraphs on the same line again

12

every time i save in CSS it switches it to a new line. im assuming that’s the formatters doing. i do use the extension “prettier - Code formatter”. how would i go about getting around the formatter w/o turning it off

13

What would be the other technique?

14

there can be many different ways, flexbox could be away, but it is introduced far later in the curriculum. You could also decrease the width until you get the desired effect

1 Like
15

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