Build a Penguin: Step 5

HTML-CSS
1

Tell us what’s happening:
Instructions ask to “Remove both the horizontal and vertical scrollbars, and prevent programmatic scrolling, using only one property.” What’s wrong with my CSS?

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="./styles.css" />
  <title>Penguin</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
</body>
</html>

/* file: styles.css */
body {
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
overflow: clip;

}

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Safari/605.1.15

Challenge: Step 5

Link to the challenge:

2

Hello @brandongrahamstudios.

I tried doing what you did in this exercise and it seems to pass on mine… did you try to refresh the page?

3

I did do a refresh but that’s not working. Even gave it a few more tries after your suggestion. Still no luck. Hmm…

4

I did a backlog on previous posts I replied to regarding this matter, and one of them suggested to click the reset button (restart step) found on the exercise though I don’t know if it works but I think you should try if you haven’t already… (after that, paste the same code to pass the exercise).

5

Unfortunately I tried that as well…several times with no luck.

6

image
image780×157 13.5 KB

Do you have any browser extensions installed (on the browser you are using)?

7

Using Safari. Only extension is MK Player 1.5.3 however it wasn’t activated. I deleted it anyway and did a refresh using same code but I’m getting the same results.

8

The first part of the instruction is to remove horizontal and vertical scrollbars however I don’t have either of those when beginning this step (before adding any additional code).
Not sure if that matters at all but it is strange I’m being asked to remove something that never appears.

9

I’m having the same issue, also using Safari.
Reset the step, refreshed the page, still not passing.

body {
  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow: clip;
}
10

I’m curious at this point if there’s an alternative code which can be utilized or if this is simply a browser issue. Obviously this is pretty far along in the HTML/CSS course and I’ve not had this issue before with any other steps. The instructions are very specific as to the suggested code but I wonder if there’s a work-a-round.

11

Did you ever figure this out?

12

Nope, I just went back to the curriculum and skipped ahead to step 6 and the rest worked fine. I had to do something similar while doing the CSS markers curriculum; several of those steps were also giving me a similar issue so I had to skip them in the curriculum.

13

Thanks rmastro! That’s quite helpful. I’m super meticulous about completing steps–so much so that I didn’t even realize it was possible to skip ahead as I’ve never had to. LOL. I noticed on Step 6 that the CSS code in Step 5 is identical to my own so I don’t feel guilty about it. It is what it is. Thanks again!

14

If anyone else should encounter this issue–It is most definitely related to the Safari Browser. Simply download and use a different browser to complete the step (Firefox for me). Then switch back over to Safari and refresh the page. Step should show as ‘completed’.

15

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