Learn Accessibility by Building a Quiz Step 8

Tell us what’s happening:
I don’t understand what I’m supposed to be doing here. I’m just about ready to leave FreeCodeCamp over this. Once again I come to a step where I’m told to do something while never having been shown how to do it or given an example, and I’m doing all the lessons in order. The hint is not helping me fix the issue.

Here are my instructions:

A useful property of an SVG (scalable vector graphics) is that it contains a path attribute which allows the image to be scaled without affecting the resolution of the resultant image.

Currently, the img is assuming it’s default size, which is too large. Correctly, scale the image using it’s id as a selector, and setting the width to max(100px, 18vw).

What I’m typing:

#logo {
width: max(100px 18vw);
}

The hint: "Sorry, your code does not pass. Keep trying.
Hint

You should give the img a width of max(100px, 18vw).

Okay well putting an img before or after #logo doesn’t fix anything. If I change #logo to img then I lose the logo selector. I don’t have a working example of the code to use and I’ve googled and not found a solution. I’m at a complete loss as to what I’m supposed to do here.

Your code so far

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
   <title>Accessibility Quiz</title>
   <link rel="stylesheet" href="styles.css" />
 </head>
 <body>
   <header>
     <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
     <h1>HTML/CSS Quiz</h1>
     <nav></nav>
   </header>
   <main></main>
 </body>
</html>

/* file: styles.css */
body {
	background: #f5f6f7;
	color: #1b1b32;
	font-family: Helvetica;
	margin: 0;
}
#logo {
	width: max(100px 18vw);
}

   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:100.0) Gecko/20100101 Firefox/100.0

Challenge: Step 8

Link to the challenge:

HI @KatGamer !

The hint here is trying to tell you that you are missing something between the 100px and 18vw.

Once you add that in, then the test will pass.

haha. this one was getting me also. I can’t believe we just missed a comma…

Hey I am having the same issue, however I have included the comma. Any ideas anyone?

#logo {
width: max(100px, 18vw);
}