Not sure if this is a bug - overflow: hidden

[lemon1]

I am doing the “Learn the CSS Box Model by Building a Rothko Painting” project from the beta RWD course.

On step 22, the code overflow: hidden doesn’t seem to work.

At first, I thought “there is only a difference of 2 pixels so I can’t possibly notice”.

However, when I opened inspect element and checked, the dimensions of the canvas div is still the same (502 x 602) and adding/removing the code doesn’t seem to work.

And when I go to the next step (step 23) and check using inspect element, the dimensions change back to (500 x 600).

I tried this on Firefox, chrome and edge. My operating system is windows 10.

screenshot of step 22

[lemon1]

screenshot of step 23

[JeremyLT]

Please provide your full code. Thanks

I can’t copy-paste a screenshot and run it myself.

[lemon1]

Hey, i have mentioned the code in the first post

On step 22, the code overflow: hidden doesn’t seem to work.

[JeremyLT]

Again, please provide the exact literal code instead of a picture.

Like I said, it helps if I can literally copy-paste and exactly match what you have.

Typing exactly what you said you typed is working fine for me.

[lemon1]

This is the exact code.

  padding: 1px;
  overflow: hidden;

Also i figured out what went wrong.

i just noticed that the instructions say

Replace the padding property with overflow set to hidden - changing the canvas back to its original dimensions.

Removing the line padding: 1px; fixes the issue I mentioned.

The original code(the one i mentioned above) passed the test and let me continue to the next step. Maybe it doesn’t test to check if padding: 1px; was removed or not…

[JeremyLT]

Ah. Yeah, the test should probably check that the code was replaced since the combo of both lines doesn’t generate the correct result.

Bugs can be reported as GitHub Issues.

[lemon1]

Yup. I’d like to raise this as an issue on GitHub.

[lasjorg]

There is a test for the padding but it looks like the test is checking the wrong element.

Link to the tests

You should remove the padding property from the .one selector.

const onePadding = new __helpers.CSSHelp(document).getStyle('.one').getPropertyValue('padding'); assert(!onePadding);`

[lemon1]

Ohh.

Can i directly make a PR, changing one to canvas ? Or do I still need to raise an issue?

[lasjorg]

Up to you, I’m not really sure we need an issue, but it can be nice to have.

You can open an issue and say you are fixing it then in the PR that fixes it add the issue number under the “Closes” part.

Have you made PRs on the freeCodeCamp repo before? If not please read the contribute docs first.

freeCodeCamp.org

[lemon1]

Thank you for your reply. I am creating the issue at the moment.