Learn Accessibility by Building a Quiz - Step 8

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
How do I make an id selector? I keep getting errors. The instruction says ---- " Currently, the img is assuming its 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) ."
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;
}


/* User Editable Region */

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

/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 8

Link to the challenge:

2

Hello!
Try using the #logo selector to complete this lesson. # is the id.
Hope you find this helpful.
Happy coding. :slight_smile:

3

That’s the error message I get.

4

I dont see an error message in your last reply. Did you try what was mentioned above? You can show your latest code by using the format button which looks like </>. Paste the new code between the two lines it gives you

5

This is the code I did
id {width: max(100px, 18vw);}

6

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

2 Likes
7

Lets take a closer look at what directions say

" scale the image using it’s id as a selector, and setting the width to max(100px, 18vw)"

Now we can look at what pudgie suggested

Try using the #logo selector to complete this lesson. # is the id.

She is saying use the #logo selector because if you look at your html and look at the img you will see it has an id of “logo”. In CSS a # is used to represent that it is an id selector that is being styled.

In your code, you need to replace “id” with the id selector that the img has. Which pudgie has already said what that is

2 Likes
8

Thank you very much for the explanation

9

Thank you, Cody. Hopefully, my responses will be more clear in the future. You are an awesome Leader! :1st_place_medal:

1 Like
10

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