Learn Intermediate CSS by Building a Picasso Painting - Step 8

HTML-CSS
1

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

In the Picasso Painting Step 8: The width and height properties as a percentage are working fine in the freecodecamp.org lesson. However I am using my own editor to work alongside the lesson. With this step, I noticed that my html file on my browser does not reflect the width: 100%; and height: 60%; change. I have rechecked my code on both html and css, and it is the exact same as how it is written on freecodecamp. I noticed that it is reflected once i replace the percentages with pixel values. I would like to know why it is working on freecodecamp lesson but not on my one files, and how can i use the same width and height percentage values on mine.

Your code so far

<!-- file: index.html -->
<!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>

/* file: styles.css */
body {
  background-color: rgb(184, 132, 46);
width: 100%;
height: 60%;

}

#back-wall {
  background-color: #8B4513;

/* User Editable Region */



/* User Editable Region */

}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36

Challenge: Learn Intermediate CSS by Building a Picasso Painting - Step 8

Link to the challenge:

1 Like
2

Hello @cperalt ,

I have checked your code and reading the step 8:

Give the #back-wall element a width of 100% and a height of 60% .

I can see that you include in your body the weight and the height instead to put them on the class “#back-wall”.

image

I hope that you can continue with your exercise wthout any problem and complete the module. :slight_smile:

3

Hi, Thanks for the reply! I am sorry, that was a mistake on my part. Yes width and height go under #back-wall. and that works fine in freecodecamp, but in my own editor and file it does not reflect on the html file on a browser.

Screenshot 2023-08-11 at 7.48.21 PM
Screenshot 2023-08-11 at 7.48.21 PM2880×1800 221 KB

4

Thanks for the replies! For some reason the width and height properties showed after I added the next step in freecodecamp lesson which was to set the position of #back-wall to absolute. I guess the confusing part was that the #back-wall width and height properties were showing in the preview step 8, before adding the absolute position on freecodecamp, step 9. However on my own file and editor the browser html file didn’t display the #back-wall until setting position to absolute.

5

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