2022-05-13 15:35:27 +00:00
---
id: 5f3477cbcb6ba47918c1da92
2022-10-18 07:29:49 +00:00
title: Step 17
2022-05-13 15:35:27 +00:00
challengeType: 0
2022-10-18 07:29:49 +00:00
dashedName: step-17
2022-05-13 15:35:27 +00:00
---
# --description--
Per far sì che lo stile della pagina sia simile su uno smatphone, su un desktop o un laptop, devi aggiungere un elemento `meta` con un attributo speciale `content` .
Aggiungi il seguente codice all'interno dell'elemento `head` :
```html
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
```
# --hints--
Il codice dovrebbe avere due elementi `meta` .
```js
2022-07-12 14:20:26 +00:00
assert(code.match(/< meta. *? \/? > /g).length === 2);
2022-05-13 15:35:27 +00:00
```
L'elemento `meta` dovrebbe avere un attributo `name` con il valore `viewport` .
```js
const meta = $('meta');
assert(meta[0].outerHTML.match(/name=('|")viewport\1/) || meta[1].outerHTML.match(/name=('|")viewport\1/));
```
L'elemento `meta` dovrebbe avere un attributo `content` con il valore `width=device-width, initial-scale=1.0` .
```js
const meta = $('meta');
assert(meta[0].outerHTML.match(/content=('|")width=device-width, initial-scale=1.0\1/) || meta[1].outerHTML.match(/content=('|")width=device-width, initial-scale=1.0\1/));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
2022-06-28 13:30:45 +00:00
< html lang = "en" >
2022-05-13 15:35:27 +00:00
--fcc-editable-region--
< head >
< meta charset = "utf-8" / >
< title > Cafe Menu< / title >
2022-06-21 15:00:08 +00:00
< link href = "styles.css" rel = "stylesheet" / >
2022-05-13 15:35:27 +00:00
< / head >
--fcc-editable-region--
< body >
2022-10-18 07:29:49 +00:00
< main >
2022-10-11 18:26:51 +00:00
< h1 > CAMPER CAFE< / h1 >
< p > Est. 2020< / p >
2022-05-13 15:35:27 +00:00
< section >
< h2 > Coffee< / h2 >
< / section >
< / main >
< / body >
2022-06-28 13:30:45 +00:00
< / html >
2022-05-13 15:35:27 +00:00
```
```css
h1, h2, p {
text-align: center;
}
```
