Learn Basic CSS by Building a Cafe Menu - Step 56

HTML-CSS
1

Hi there

Thank you in advance for your replies!

My question is on Step 56 and I am not stuck but am rather looking for some explanations. I used chatgpt to ask questions and I think my thought process is right.

so just to outline the details the code is on css:

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

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

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

the question was :
The current width of the menu will always take up 80% of the body element’s width. On a very wide screen, the coffee and dessert appear far apart from their prices.

Add a max-width property to the menu class with a value of 500px to prevent it from growing too wide.

So the reason I am confused is because I understand the concept and why we are doing it but dont understand why.

So the objective is to set the max width at 500px and the max width the .menu class can use of this is 80%.

would it not be better to write this within the body element rather than the .menu class.

is there any reason you would want to set the max-width to individual classes rather than the body element itself?

I hope that all makes sense, maybe I am just jumping the gun and step 57 is going to tell me we can put this in the body xD but thought I would ask incase it has more complex uses further down the line of my journey.

Best Wishes

John :slight_smile:

2

hello and welcome to fcc forum :slight_smile:

  • you dont really want that, do you? because doing it for “body” will only take up only “80% of 500px” from screen, which is gong to be pretty small window for this entire app
  • you only want to target “.menu” to have that property to take up “80%”

also include “step/.exercise” url along with your question, that way you dont have to write up question text for yourself, happy coding :slight_smile:

1 Like
3

thank you for the welcome, answer and the url tip I will be sure to use it next time!

4

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