I'm designing a personal static webpage and I don't have experience regarding HTML and CSS other than messing with them a bit, but trying to find information on best practices made me decide on using media queries for font-size handling (for mobile/desktop support) and use relative units.
I achieved the layout I wanted for my homepage, covering the whole viewport, everything very basic and grey-box-y to keep it simple at first.
Problem is that a child div is for some reason getting wider and taller than the viewport itself, only when the window size is small enough (500x403, for example; on 513x421, it doesn't happen anymore).
Can you please help me identify the problem?
Here's my HTML/CSS:
@font-face {
font-family: "Fredericka the Great";
src: url("./Fonts/FrederickatheGreat-Regular.ttf");
src: url("./Fonts/FrederickatheGreat-Regular.ttf") format("truetype");
}
/* Futura Medium */
@font-face {
font-family: "Futura Medium";
src: url("./Fonts/FuturaStd-Medium.otf");
src: url("./Fonts/FuturaStd-Medium.otf") format("opentype");
}
/* Adjust raw configurations */
body {
margin: 0;
padding: 0;
background: blanchedalmond;
}
/* Homepage header configuration */
.homepage-header {
container-type: inline-size;
width: 100vw;
height: 100vh;
}
.homepage-header-box {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto auto;
align-content: center;
justify-items: center;
text-align: center;
width: 100%;
height: 100%;
overflow: visible;
}
.homepage-header-box h1 {
margin: 0;
grid-column: 1 / 2;
grid-row: 1 / 2;
font-family: "Fredericka the Great", sans-serif;
font-weight: 400;
font-size: 1rem;
}
.homepage-header-box p {
margin: 0;
grid-column: 1 / 2;
grid-row: 2 / 3;
font-family: "Futura Medium", sans-serif;
font-weight: 400;
font-size: 1rem;
}
/* Homepage header font size handling */
@container (width > 720px) {
.homepage-header-box h1 {
font-size: 7vw;
}
.homepage-header-box p {
font-size: 2.25vw;
}
}
@container (width <=720px) {
.homepage-header-box h1 {
font-size: 18vw;
}
.homepage-header-box p {
font-size: 6vw;
}
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>My Pretty Site</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="homepage-header">
<div class="homepage-header-box">
<h1>My pretty awesome text</h1>
<p>And that other amazing text that I produced for you guys</p>
</div>
</header>
</body>
</html>
