I’m following this tutorial and on 26:30 the tutor moves the .png logo image to the center of the screen by using “position: absolute”. I’m not able to achieve the same result – my image stays on the right of the screen. My font and image is different than the tutor’s, but the font is Regular 400 and the image is 250×250 .png, just like the tutor’s.
Here’s my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap" rel="stylesheet">
<title>Snake</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<div>
<div class="scores">
<h1 id="score">000</h1>
<h1 id="highScore">000</h1>
</div>
<div class="game-border-1">
<div class="game-border-2">
<div class="game-border-3">
<div id="game-board"></div>
</div>
</div>
</div>
</div>
<h1 id="instruction-text">Press "Space" to start!<h1>
<img id="logo" src="game-logo.png" alt="snake-logo">
</body>
</html>
And here’s my style.css:
body {
display: flex;
align-items:center;
justify-content: center;
height: 100vh;
margin: 0;
font-family: "Pixelify Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
body {
background-color: #5c71e9;
}
#game-board {
border-radius: 100px;
display: grid;
grid-template-columns: repeat(20, 20px);
grid-template-rows: repeat(20, 20px);
margin: 5px;
}
.game-border-1 {
border: #010101 solid 10px;
border-radius: 30px;
box-shadow: inset 0 0 0 10px #010101;
}
.game-border-2 {
border: #454344 solid 8px;
border-radius: 26px;
box-shadow: inset 0 0 0 10px #454344;
}
.game-border-3 {
border: #b2b3b5 solid 30px;
border-radius: 20px;
box-shadow: inset 0 0 0 5px #b2b3b5;
background-color: #010101;
}
#instruction-text {
position: absolute;
top: 62.5%;
color: #fefdf9;
text-shadow: #b2b3b5 0px 3px 0px;
width: 400px;
font-size: 25px;
text-align: center;
text-transform: capitalize;
padding: 30px;
margin: 0;
}
.scores {
display: flex;
justify-content: space-between;
}
#score {
color: #fefdf9;
}
#score,
#highScore {
font-size: 40px;
font-weight: bolder;
margin: 10px 0;
}
#highScore {
color: #010101;
display: none;
}
.snake {
background-color: #fefdf9;
border: #454344 1px dotted;
}
.food {
background-color: #ff0000;
border: #fefdf9 5px solid;
}
#logo {
position: absolute;
}
Any idea where the problem could be? I’m super new to HTML and CSS, so sorry if this is an easy one to solve.
I’ve tried changing the font to the one that the tutor uses and the image to the one that the tutor uses, but that didn’t solve the issue. Tried using different “position” types, but that didn’t help too.
New contributor
sleep is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.