25aa04e2e7
* chore(curriculum): accessibility-quiz * chore(curriculum): cafe-menu * chore(curriculum): ferris-wheel * chore(curriculum): fix ferris-wheel tests * chore(curriculum): colored-markers * chore(curriculum): photo-gallery * chore(curriculum): magazine * chore(curriculum): penguin * chore(curriculum): city-skyline * chore(curriculum): registration-form * chore(curriculum): picasso-painting * chore(curriculum): balance-sheet * chore(curriculum): piano * chore(curriculum): rothko-painting * fix: title min 15 chars
1.4 KiB
1.4 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 5f356ed60785e1f3e9850b6e | Step 25 | 0 | step-25 |
--description--
Now it's easy to see that the text is centered inside the div element. Currently, the width of the div element is specified in pixels (px). Change the width property's value to be 80%, to make it 80% the width of its parent element (body).
--hints--
You should set the width property to 80%.
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '80%');
assert(hasWidth);
You should not have a width property of 300px.
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
assert(!hasWidth);
--seed--
--seed-contents--
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cafe Menu</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<header>
<h1>CAMPER CAFE</h1>
<p>Est. 2020</p>
</header>
<main>
<section>
<h2>Coffee</h2>
</section>
</main>
</div>
</body>
<html>
body {
/*
background-color: burlywood;
*/
}
h1, h2, p {
text-align: center;
}
--fcc-editable-region--
div {
width: 300px;
background-color: burlywood;
}
--fcc-editable-region--