Learn Basic CSS by Building a Cafe Menu - Step 22

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

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>
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
          <h2>Coffee</h2>
        </section>
      </main>
    </div>
  </body>
</html>

/* file: styles.css */
 body {

/* User Editable Region */

   /* background-color: burlywood; */

/* User Editable Region */

}

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

div {
  width: 300px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36

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

Link to the challenge:

2

x x x x
x x x x1877×962 45.6 KB

what’s wrong with this comment in Step 22?

They said - You should comment out the background-color: burlywood; line in your CSS.
I did that and still, I get an error that my code does not pass and I should try again.

3

I don’t know if it is just in the screenshot but the body color is not fully white. Do you have any extensions installed that are changing the colors on sites?

When I color pick the image I get #f8f8f8 and not #fffff

  1. Right-click the preview window and select Inspect.

  2. In the Elements tab make sure the body element is selected.

  3. You should see a Styles tab below the Elements inspector pane and next to it a Computed tab.

  4. Click the Computed tab and tell me what it shows for background-color it should be rgba(0, 0, 0, 0)

computed-value
computed-value1050×531 24.9 KB

4

Thanks for your feedback!

Here’s my screenshot.
It’s not fully white
I don’t understand the connection between this and commenting line of CSS code.
The task was to comment on this line of code.

ddsdsdsd
ddsdsdsd1876×935 134 KB

5

I turn off all the extensions in my Brave browser and now it’s ok!
Crazy!

Can you please tell me why is this happening?

6

Extensions may interfere with the tests. We warn about this at the start.

Note: Some browser extensions, such as ad-blockers and dark mode extensions can interfere with the tests. If you face issues, we recommend disabling extensions that modify the content or layout of pages, while taking the course.

Any extension that changes colors (like dark mode) will alter the color the test is looking for. So the test will fail.

1 Like
7

Thanks!
I missed that information!
I’ll we have that in mind in the future!

Best!

8

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