I’ve been trying to solve this problem for days but haven’t had any success at all. I’m trying to recreate this dashboard and everything has been working fine so far, except my sidebar. The logo, along with all the other links I have under it seem to be totally unresponsive to the grid changes I make to the sidebar. I’m trying to vertically center these items, but it just won’t work no matter what I try.
Here’s my HTML & CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/24184bbc2f.js" crossorigin="anonymous"></script>
<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=Urbanist:wght@300;500;900&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>
<body>
<div class="wrapper">
<nav class="navbar">
<div class="logo"><img src="/unnamed1.png" alt="Amazon"></div>
<a href="#">
<img src="/db.png" alt="" class="nav-btn dashboard">
</a>
<a href="#">
<img src="/stock.png" alt="" class="nav-btn stocks">
</a>
<a href="#">
<img src="/p.png" alt="" class="nav-btn profile">
</a>
<a href="#">
<img src="/settings.png" alt="" class="nav-btn settings">
</a>
</nav>
<main class="main-db">
<h1>
Amazon Dashboard
</h1>
<div class="order-wrapper">
<div class="mycard purple-card">
<h2>My orders</h2>
<a href="#" class="view-all">View all</a>
</div>
<div class="mycard dlv-card">
<i class="far fa-check-circle"></i>
<h2>Order 1</h2>
<span>Delivered</span>
</div>
<div class="mycard dlv-card">
<i class="far fa-check-circle"></i>
<h2>Order 2</h2>
<span>Delivered</span>
</div>
</div>
<div class="message-wrapper">
<h3>New messages</h3>
<div class="mycard msg-card">
<div class="msg-header">
<i class="far fa-envelope"></i>
<h4>Message 1</h4>
</div>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique sed aperiam voluptates, culpa voluptate, atque sapiente blanditiis quidem tenetur aliquam id. Consequuntur dignissimos mollitia accusantium ex consectetur cupiditate hic enim.
</p>
</div>
<div class="mycard msg-card">
<div class="msg-header">
<i class="far fa-envelope"></i>
<h4>Message 2</h4>
</div>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique sed aperiam voluptates, culpa voluptate, atque sapiente blanditiis quidem tenetur aliquam id. Consequuntur dignissimos mollitia accusantium ex consectetur cupiditate hic enim.
</p>
</div>
<div class="mycard msg-card">
<div class="msg-header">
<i class="far fa-envelope"></i>
<h4>Message 3</h4>
</div>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique sed aperiam voluptates, culpa voluptate, atque sapiente blanditiis quidem tenetur aliquam id. Consequuntur dignissimos mollitia accusantium ex consectetur cupiditate hic enim.
</p>
</div>
<button type="button" class="btn btn-primary">
<i class="fas fa-inbox"></i>
View inbox
</button>
</div>
</main>
<footer class="info">
<div class="profile">
<div class="pfp-container"><img src="/480px-President_Barack_Obama.jpg" alt="Profile Picture" class="pfp"></div>
<h2>Barack Obama</h2>
<span class="pfp-span">President</span>
</div>
<div class="balance">
<div class="mycard">
<p>Current balance</p>
<p>$26,540</p>
</div>
</div>
</footer>
</div>
</body>
</html>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
height: 100vh;
font-family: 'Urbanist', sans-serif !important;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 6fr 2fr;
width: 100vw;
height: 100%;
grid-template-areas:
"n m p";
}
/* BUTTONS */
.nav-btn {
max-width: 40px;
margin: 20px;
}
/* NAVBAR */
.navbar {
grid-area: n;
display: grid;
justify-content: center;
justify-items: center;
grid-template-rows: repeat(8, 1fr);
background-color: rgb(184, 184, 184);
}
.main-db {
grid-area: m;
}
.info {
grid-area: p;
}
.logo {
max-width: 150px;
/* justify-content: space-around;
align-content: space-around; */
grid-row: 1 / 2;
}
img[src="/unnamed1.png"] {
max-width: 200px;
}
.profile {
grid-row: 2 / 3;
place-self: center;
}
.settings {
grid-row: 3 / 4;
}
.stocks {
grid-row: 4 / 5;
}
.mycard {
border: 2px solid;
border-radius: 10px;
}
.purple-card {
background-color: rgb(66, 0, 110);
border-color: rgb(66, 0, 110);
color: white;
}
.dlv-card {
background-color: rgba(255, 197, 109, 0.35);
border-color: rgba(255, 197, 109, 0.35);
color: rgb(223, 145, 0);
}
.view-all {
color: white;
}
.view-all:hover {
color: rgb(148, 148, 148);
}
.msg-header {
display: flex;
}
.msg-card {
background-color: rgba(214, 214, 214, .3);
border-color: rgba(214, 214, 214, .3);
}
.pfp-container {
width: 250px;
height: 250px;
overflow: hidden;
border-radius: 50%;
position: relative;
}
.pfp {
position: absolute;
left: -45%;
}