RWD Beta: Transform Penguin: Steps 55, 82, 88

Affected page

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-transforms-by-building-a-penguin/step-55

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-transforms-by-building-a-penguin/step-82

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-transforms-by-building-a-penguin/step-88

Your code

Not applicable

Expected behavior

The editor fills the screen instead of showing the instructions. You have to scroll up o see the instructions, and it’s not obvious if you should scroll up or down.

Screenshots

Step 55:

System

• Device: [Laptop]
• OS: [Windows 10]
• Browser: [brave]
• Version: [Version 1.33.106 Chromium: 96.0.4664.110 (Official Build) (64-bit)]

Additional context

What the 3 steps have in common is that the editor has focus on the 1st line of the CSS file. All other lessons show the previous row number above the instructions (see screenshots). I may have seen this in previous sections but I can’t be sure.

If someone can query all the lessons in all the sections to find where the focus is at line 1, then I could check them. Although, that will happen for all the early lessons. You would probably need to do a condition for 10 or more lines of code in the CSS file. That’s assuming you need someone to check it rather than seeing the issue and fixing it in the other sections. Also, I need a list of lessons to check because I don’t know how to easily scroll through all the steps. I had to CTRL+click every step in the penguin section because I knew I missed one (Step 55).

[Kernix13]

I said it was declared twice, meaning in the global scope - or at least that is what I thought. I didn’t notice that. My mistake, let me keep poking around…

[ShaunSHamilton]

@Kernix13 No worries. It is one of the largest files in our codebase. So, it takes a lot of time to read / get used to.

I will spend some more time looking into it.