Cafe Menu possible bug

HTML-CSS
1

To anyone kind enough to read this post, hello :slight_smile: .

I seem to have found a problem with the Cafe Menu CSS. The .flavor and .price selectors are set to a width: 75%; and 25%; respectivly, and appear to spread them out correctly in the tutorial. However when I copy the html and CSS code into a text editor it apears differently. I’m very new to this so my question is why?

cafe menu
cafe menu1536×968 127 KB

EDIT: when i change the width values to 49% for both as the tutorial first suggests the menu item and price display as intended. but not when i revert back to the 75% and 25% as the tutorial goes on to instruct.

Edit 2: When i set the width to 75% and 24% it also displays correctly, however making the window narrow the two 49% width values produce the best results and the 75% and 24% width values stack on top of each other awkwardly.

2

It is hard to answer without seeing the code you used.

3

i used the exact code from the finished cafe menu tutorial. i just copy and paste it

4

Which step did you copy from?

5

Once i finished the final step of the cafe menu i copied all the html and css.

6

I think you didn’t copy the code correctly because I just tried it and it worked perfectly for me.
Please share the code you are using.

1 Like
7

the CSS:

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

h1 {
  font-size: 40px;
  margin-top: 0;
  margin-bottom: 15px;
}

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

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: -25px;
}

hr {
  height: 2px;
  background-color: brown;
  border-color: brown;
}

.bottom-line {
  margin-top: 25px;
}

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

.item p {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 18px;
}

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

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

/* FOOTER */

footer {
  font-size: 14px;
}

.address {
  margin-bottom: 5px;
}

a {
  color: black;
}

a:visited {
  color: black;
}

a:hover {
  color: brown;
}

a:active {
  color: brown;
}

i’ve tried it more than once, i copied it stright from step 91 of the cafe menu tutorial. the code editor i’m using is VScode and im opening it in chrome. thanks again for looking at it for me.

8

when i copy the HTML and the CSS straight from step 91 the image i posted at the top is what i get, which is not the same as what is shown in the tutorial.

9

The only way to get it to look the same is to make the .item and .price width value a combined value of 98% otherwise it stacks as shown in the image in the original post. combined value of 99% works so long as you dont shrink the window down, if you do it also awkwardly stacks

10

thanks. I have edited the code to place it into a code block so I can copy it and read it easier on the forum. I will let u know what I find.

11

update: i copied your css and again, it worked perfectly for me.
What about your html? Can you share that too?

12

when i try to post the HTML i get a forum error saying;

An error occurred: Sorry, new users can only put one embedded media item in a post.

im litrally using the html from step 91, i’ve copy and paste it a few times just to make sure i wasnt making a mistake. im not writing anything in the document, it’s litrally copy and paste from step 91.

13

okay so when you copy code here you have to use the correct code block (three backticks above it and three backticks below it)
```
code in between
```

When you copy the code you don’t change anything, not even the link to the stylesheet?

14

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