I am not able to remove inherited/auto row gaps generated while using gridbox. When I try to remove the gap by reducing it to negative, the whole column gap just disappears.
And also I would like to solve the overflowing problem caused when trying to make the site responsive.
I am a beginner.
let homeEl = document.getElementById("home-el")
let guestEl = document.getElementById("guest-el")
let homeRun = 0
let guestRun = 0
function increment1() {
homeRun += 1
homeEl.textContent = homeRun
}
function increment2() {
homeRun = homeRun + 2
homeEl.textContent = homeRun
}
function increment3() {
homeRun = homeRun + 3
homeEl.textContent = homeRun
}
function increment1() {
guestRun += 1
guestEl.textContent = guestRun
}
function increment2() {
guestRun += 2
guestEl.textContent = guestRun
}
function increment3() {
guestRun += 3
guestEl.textContent = guestRun
}* {
/* max-width: 500px; */
margin: 0;
padding: 0;
}
.big {
position: absolute;
background-color: #1B244A;
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: auto auto;
gap: 0 12rem;
justify-content: center;
align-items: center;
text-align: center;
}
.title-home {
font-family: 'Verdana';
font-style: normal;
font-weight: 700;
font-size: 8vh;
color: white;
text-align: center;
height: 10vh;
width: 9vw;
}
.title-guest {
font-family: 'Verdana';
font-style: normal;
font-weight: 700;
font-size: 8vh;
color: white;
text-align: center;
height: 10vh;
width: 9vw;
}
.homeScore {
background-color: black;
height: 20vh;
width: 10vw;
border: 2px solid black;
border-radius: 0.3rem;
display: grid;
align-content: center;
font-family: 'Cursed Timer ULiL';
font-style: normal;
font-weight: 400;
font-size: 6rem;
color: #F94F6D;
}
.guestScore {
background-color: black;
height: 20vh;
width: 10vw;
border: 2px solid black;
border-radius: 0.3rem;
display: grid;
align-content: center;
font-family: 'Cursed Timer ULiL';
font-style: normal;
font-weight: 400;
font-size: 6rem;
color: #F94F6D;
}
.increment {
background-color: #1B244A;
height: 10vh;
width: 10vw;
display: grid;
grid-template-columns: auto auto auto;
gap: 0 0.5rem;
justify-content: center;
align-items: center;
font-family: 'Cursed Timer ULiL';
font-style: normal;
font-weight: 400;
font-size: 1rem;
color: #9AABD8;
}
.increaseBy1 {
border: 3px solid #9AABD8;
border-radius: 4px;
height: 4.5vh;
width: 1.6vw;
}
.increaseBy2 {
border: 3px solid #9AABD8;
border-radius: 4px;
height: 4.5vh;
width: 1.6vw;
}
.increaseBy3 {
border: 3px solid #9AABD8;
border-radius: 4px;
height: 4.5vh;
width: 1.6vw;
}
#increase-btn {
background-color: transparent;
border: none;
outline: none;
font-family: 'Cursed Timer ULiL';
font-style: normal;
font-weight: 400;
font-size: 1.2rem;
color: #9AABD8;
}<!DOCTYPE html>
<html>
<head>
<title>Basketball Score Card</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="big">
<div class="title-home"> HOME</div>
<div class="title-guest">GUEST</div>
<div class="homeScore">
<p id="home-el">0</p>
</div>
<div class="guestScore" id="guest-el">
<p id="guest-el">0</p>
</div>
<div class="increment">
<div class="increaseBy1">
<button id="increase-btn" type="button" onclick="increment1()">+1</button>
</div>
<div class="increaseBy2">
<button id="increase-btn" type="button" onclick="increment2()">+2</button>
</div>
<div class="increaseBy3">
<button id="increase-btn" type="button" onclick="increment3()">+3</button>
</div>
</div>
<div class="increment">
<div class="increaseBy1">
<button type="button" id="increase-btn" onclick="increment1()">+1</button>
</div>
<div class="increaseBy2">
<button type="button" id="increase-btn" onclick="increment2()">+2</button>
</div>
<div class="increaseBy3">
<button type="button" id="increase-btn" onclick="increment3()">+3</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>