curriculum/challenges/english/blocks/workshop-accessibility-quiz/613e275749ebd008e74bb62e.md
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 the above example, the width of the image will be 250px if the viewport width is less than 1000 pixels. If the viewport width is greater than 1000 pixels, the width of the image will be 25vw. This is because 25vw is equal to 25% of the viewport width.
Scale the image using its id as a selector, and setting the width to be the maximum of 10rem or 18vw.
You should use the #logo selector to target the img element.
assert.exists(new __helpers.CSSHelp(document).getStyle('#logo'));
You should give the img a width of max(10rem, 18vw).
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(10rem, 18vw)');
<!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>
<h1>HTML/CSS Quiz</h1>
<nav></nav>
</header>
<main></main>
</body>
</html>
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
--fcc-editable-region--
--fcc-editable-region--