the icons aren't centered
I have tried everything I know, but I'm a little rusty
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" /> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>you suck if u read this</title>
</head>
<body>
<ul class="sidebar">
<li class="icon">
<span class="material-symbols-outlined">
add
</span>
</li>
<li class="icon">
<span class="material-symbols-outlined">
add
</span>
</li>
</ul>
</body>
</html>
CSS:
ul{
height: 100vh;
position: fixed;
background-color: #d13d3d;
border-color: #00ADB5;
border: solid;
border-width: 4px;
border-radius: 5px;
width: 5vw;
display: flex;
justify-content: center;
}
li{
list-style-type: none;
text-align: center;
}
(the colors are temperery)
4 Replies
the li is reacting likr there are the dots for some reason
and I want to make it vertical
Can you post this in #front-end and put your code in a codepen? (Codepen.io)
ok
in codepen only it works but not in chrome or firefox
but I'll do that
It suddenly works for some reason but not when I change the size of the web to half screen
Add this to the frontend post