Tell us what’s happening:
Hello people! I have been taking this text for a long time I dont know the reason why am I stuck here. I think everthing is correct but it says its wrong. Please help!!!
Describe your issue in detail here.
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.
My answer:
#logo{
width: max(100px, 18vw);
}
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
#logo{
width: max(100px, 18vw);
}
Sorry, your code does not pass. You’re getting there.
You should use the #logo selector to target the img element.
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);
}
/* User Editable Region */
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36
Challenge Information:
Learn Accessibility by Building a Quiz - Step 8
Hello! Welcome to the forum!