CSS works in FreeCodeCamp, but not in VS Code

HTML-CSS
1

Hi there,

I’ve faced this problem and can’t figure out what’s wrong:
I have this code in FreeCodeCamp online:
HTML part:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Picasso Painting</title>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  </head>
  <body>
    <div id="back-wall"></div>
  </body>
</html>

CSS part:

body {
  background-color: rgb(184, 132, 46);
}

#back-wall {
  background-color: #8B4513;
  width: 100%;
  height: 60%;
}

This results in this:

image
image1366×768 30.1 KB

This is the correct outcome

When I type the same code in VS Code it does not apply the #back-wall selector style and results in just showing the styled body

However, if i put width and height for #back-wall in vw instead of % it would work

Why is that and how to fix it?

Best regards

P.S., once I’ve applied:
position: absolute;
top: 0;
left:0;
it would work and show #back-wall div.
Anyway, I’d like to hear why it hadn’t work before that))

2

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

4

height: 60% is only going to work if you set a height on the html/body. Otherwise it is a percentage of nothing, so it is 0 in computed height.

html,
body {
  height: 100%;
}

Or more likely, you will use a viewport unit vh instead.

#back-wall {
  background-color: #8b4513;
  width: 100%;
  height: 60vh;
}

The reason it work in the fCC editor is because the iframe the code runs inside is giving a height.

5

Fixed it in a new post
Thanks

1 Like
6

Yeah
That’s worked
Thanks

7

Done in a new post
Regards

1 Like
8

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