CODEWITHSUNDEEP
csscss-grid
user9994390
user9994390

Reputation:

Why does the text leave the grid box?

Why doesnt the grid boxes size change depending on the font size because currently the text thats in the header and footer element is out of the box when i put font-size:25;? do i need to put all of the elements into divs to do so? if you do seem to fix this for me please explain what you did to fix the issue. thank you

: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>

Upvotes: 3

Views: 115

Answers (1)

Temani Afif
Temani Afif

Reputation: 273561

Simply because you used fixed value for header and footer thus you have overflow grid-template-rows: 80px 1fr 70px. Replace the fixed values with the minmax() function so the height will adjust if the content is bigger

:root {
	--light: #666666;
	--dark: #000000;
}

body { 
	display: grid;
	grid-template-areas: 
	  "header header header"
	  "nav article article"
	  "footer footer footer";
	grid-template-rows: minmax(80px,max-content) 1fr minmax(70px,max-content);  
	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: minmax(80px,max-content) 1fr minmax(70px,max-content) 1fr minmax(70px,max-content);  
	  grid-template-columns: 1fr;
   }
}
<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>

Upvotes: 3

Related Questions