Learn Accessibility by Building a Quiz - Step 8

Tell us what’s happening:

Step 8

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 its default size, which is too large. CSS has a max function which returns the largest of a set of comma-separated values. For example:

img {
  width: max(250px, 25vw);
}

In this example, img elements will have a minimum width of 250px. And as the viewport grows, the image will grow accordingly to be 25 percent of the viewport width.

Scale the image using its id as a selector, and setting the width to be the maximum of 100px or 18vw.

The tutorial is telling me to… You should give the img a width of `max(100px, 18vw)

But to me the code says that.

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 */

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

/* 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/121.0.0.0 Safari/537.36

Challenge Information:

Learn Accessibility by Building a Quiz - Step 8

I have also tried this

#logo {
  min-width: min(100px, 18vw);
  max-width: max(250px, 25vw);
}

Welcome to the forum @mountaineer03

Your code has two sets of width properties and values.
If you remove the unnecessary one, the code will pass.

Happy coding

Thanks, I see what I did. I combined the sample with my copy and used both of them.

1 Like