Files
Nicholas Carrigan (he/him) 8614db7a32 feat: enable new curriculum (#44183)
* feat: use legacy flag

chore: reorder challenges

fix: linter

revert: server change

feat: unblock new editor

fix: proper order

fix: 0-based order

fix: broke the order

feat: move tribute certification to its own block

feat: split the old projects block into 4

fix: put all blocks in order

chore: add intro text

refactor: use block, not blockName in query

fix: project progress indicator

* fix: reorder new challenges/certs

* fix: reorder legacy challenges

* fix: reintroduce legacy certs

* feat: add showNewCurriculum flag to env

* chore: forgot sample.env

* feat: use feature flag for display

* fix: rename meta + dirs to match new blocks

* fix: add new blocks to help-category-map

* fix: update completion-modal for new GQL schema

* test: duplicate title/id errors ->  warnings

* fix: update completion-modal to new GQL schema Mk2

* chore: re-order metas (again)

* fix: revert super-block-intro changes

The intro needs to show both legacy and new content.  We need to decide
which pages are created, rather than than what a page shows when
rendered.

* feat: move upcoming curriculum into own superblock

* fix: handle one certification with two superBlocks

* fix: remove duplicated intros

* fix: remove duplicate projects from /settings

* fix: drop 'two' from Responsive Web Design Two

* chore: rename slug suffix from two to v2

* feat: control display of new curriculum

* feat: control project paths shown on /settings

* fix: use new project order for /settings

This does mean that /settings will change before the release, but I
don't think it's serious.  All the projects are there, just not in the
legacy order.

* fix: claim/show cert button

* chore: remove isLegacy

Since we have legacy superblocks, we don't currently need individual
blocks to be legacy

* test: fix utils.test

* fix: verifyCanClaim needs certification

If Shaun removes the cert claim cards, maybe we can remove this entirely

* fix: add hasEditableBoundaries flags where needed

* chore: remove isUpcomingChange

* chore: v2 -> 22

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
2021-12-20 12:36:31 -06:00

112 lines
2.3 KiB
Markdown

---
id: 5f3c866dd0d0275f01d4d847
title: Step 40
challengeType: 0
dashedName: step-40
---
# --description--
Well that did not work. Styling the `p` elements as `inline-block` and placing them on separate lines in the code creates an extra space to the right of the first `p` element, causing the second one to shift to the next line. One way to fix this is to make each `p` element's width a little less than `50%`.
Change the `width` value to `49%` for each class to see what happens.
# --hints--
You should set the `width` property to `49%` in your `.flavor` selector.
```js
const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
assert(flavorWidth === '49%');
```
You should set the `width` property to `49%` in your `.price` selector.
```js
const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
assert(priceWidth === '49%');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Camper Cafe Menu</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menu">
<header>
<h1>CAMPER CAFE</h1>
<p>Est. 2020</p>
</header>
<main>
<section>
<h2>Coffee</h2>
<article class="item">
<p class="flavor">French Vanilla</p>
<p class="price">3.00</p>
</article>
<article>
<p>Caramel Macchiato</p>
<p>3.75</p>
</article>
<article>
<p>Pumpkin Spice</p>
<p>3.50</p>
</article>
<article>
<p>Hazelnut</p>
<p>4.00</p>
</article>
<article>
<p>Mocha</p>
<p>4.50</p>
</article>
</section>
</main>
</div>
</body>
<html>
```
```css
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
h1, h2, p {
text-align: center;
}
.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
}
.item p {
display: inline-block;
}
--fcc-editable-region--
.flavor {
text-align: left;
width: 50%;
}
.price {
text-align: right;
width: 50%;
}
--fcc-editable-region--
```