- Currently, I am working on creating a checkers game using HTML and CSS with the inclusion of CSS Flexbox and CSS Grid for layout design. However, I have encountered an issue where the page is not responsive vertically. When resizing the browser height in Chrome, the checkers board extends beyond its container and overlaps the nav and section elements. While it looks fine at full viewport height, it becomes problematic when the browser height is reduced.
- I also need assistance in setting up the page layout so that the nav takes up 20% of the viewport height and the section occupies the remaining space. The current setup I have attempted does not work as expected, so I am open to suggestions for a better approach.
Edit: To clarify my requirements, I want the chessboard to remain contained within its parent (in this case, a section) even when resizing the browser's height. I aim for the elements to stay locked within their respective containers without overlapping other sections, similar to how Twitter handles element positioning during browser resizing.
body {
margin: 0 auto;
}
/* Styling for Nav */
nav {
background: black;
height: 20vh;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
/* Styling for Section */
section {
background: pink;
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
font-family: 'Architects Daughter', cursive;
font-size: 3rem;
}
/* Setting up the Board */
.container {
display: grid;
grid-template-columns: repeat(8, 1fr);
}
.zone-1 {
background: #CEB67B;
width: 60px;
height: 60px;
}
.zone-2 {
background: #735131;
width: 60px;
height: 60px;
}
/* Checkers styling */
.checkers-container {
display: flex;
align-items: center;
justify-content: center;
}
.home-checkers {
cursor: pointer;
height: 35px;
width: 35px;
border-radius: 30px;
background: red;
border: 3px solid white;
}
.away-checkers {
cursor: pointer;
height: 35px;
width: 35px;
border-radius: 30px;
border: 3px solid white;
background: black;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Grid Checkers</title>
<link rel="stylesheet" href="gridDraft.css" />
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap" rel="stylesheet" />
</head>
<body>
<nav>
<h1>Checkers Game</h1>
</nav>
<section>
<div class="container">
<!-- Home Section -->
<!-- Include your grid structure here-->
<!-- Away Section -->
<!-- Include your grid structure here-->
</div>
</section>
</body>
</html>