gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
01c1a54f17b9664a09b94e3ae5d7a99e22783c29
freeCodeCamp/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-021.md
Darshan Vaishya 59f21b1d8f fix(curriculum): improve instructions in rothko-painting (#44816) 
* Improved instructions in rothko painting lesson

* Removed duplicate line in step 42

* Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-012.md

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-014.md

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-015.md

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-021.md

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-022.md

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-034.md

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-041.md

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-042.md

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-044.md

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-045.md

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-020.md

Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com>

* Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-014.md

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* Update curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-034.md

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com>
2022-01-21 14:31:41 +01:00

1.4 KiB
Raw Blame History

id, title, challengeType, dashedName
id title challengeType dashedName
60a3e3396c7b40068ad6997e Step 21 0 step-21

--description--

Now .one is centered horizontally, but its top margin is pushing past the canvas and onto the frame's border, shifting the entire canvas down 20 pixels.

Add padding of 1px to the .canvas element to give the .one element something solid to push off of.

--hints--

You should set the padding property to 1px.

const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '1px');
assert(hasPadding);

Your .canvas element should have a padding value of 1px.

const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('padding');
assert(canvasPadding === '1px');

--seed--

--seed-contents--

.canvas {
  width: 500px;
  height: 600px;
  background-color: #4d0f00;
--fcc-editable-region--

--fcc-editable-region--
}

.frame {
  border: 50px solid black;
  width: 500px;
  padding: 50px;
  margin: 20px auto;
}

.one {
  width: 425px;
  height: 150px;
  background-color: #efb762;
  margin: 20px auto;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Rothko</title>
    <link href="./styles.css" rel="stylesheet">
  </head>
  <body>
    <div class="frame">
      <div class="canvas">
        <div class="one"></div>
      </div>
    </div>
  </body>
</html>