Почему размер ячеек сетки не изменяется в зависимости от размера шрифта, потому что в настоящее время текст, который находится в элементе верхнего и нижнего колонтитула, находится вне поля, когда я помещаю font-size: 25 ;?мне нужно положить все элементы в div для этого?если вы все-таки решили это для меня, пожалуйста, объясните, что вы сделали, чтобы решить эту проблему.спасибо
:root {
--light: #666666;
--dark: #000000;
}
body {
display: grid;
grid-template-areas:
"header header header"
"nav article article"
"footer footer footer";
grid-template-rows: 80px 1fr 70px;
grid-template-columns: 20% 1fr 15%;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 60em;
margin: 0px;
padding: 5px 25px 5px 25px;
background-image: url(code.jpeg);
background-size: cover;
background-attachment: fixed;
}
header, footer, article, nav, div {
padding: 1.2em;
background: var(--light);
opacity: 0.85;
color:black;
border-radius: 1.2em;
}
#pageHeader {
grid-area: header;
text-align: center;
font-size: 24px;
}
#pageFooter {
grid-area: footer;
font-size: 25px;
text-align: center;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
body {
grid-template-areas:
"header"
"article"
"nav"
"footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Clodio Pontes | CV</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header id="pageHeader">
<h1>header</h1>
</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<footer id="pageFooter"><p>MADE BY</p>
</footer>
</body>
</html>