Content is hiding behind the sidebar
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
index.html
If you look at #about the div and its content is hiding behind the sidebar, I tried setting the height and width with different values. I even tried inline-block on body but it broke everything. Flex on body wasn’t even working. Even after using 75% on content and 15% on sections it still wasnt working. I want the content to show on the sections not hide behind the sidebar
<!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″ />
<link type=”text/css” rel=”stylesheet” href=”styles.css” />
<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=Gantari&display=swap”
rel=”stylesheet”
/>
<title>Haider Ali</title>
</head>
<body class=”bg-[#262525] m-0 “>
<nav class=”m-0 p-0 w-[250px] min-h-[100vh] bg-[#3C0949] fixed”>
<div
class=”flex flex-col justify-center items-center min-h-[100vh] gap-[15px]”
>
<div class=””>
<img
class=”border-[5px] rounded-full border-solid border-green-900″
width=”200″
height=”130″
src=”assets/face.png”
alt=”Haider Ali”
/>
</div>
<div class=”link”>ABOUT</div>
<div class=”link”>SKILLS</div>
<div class=”link”>EDUCATION</div>
<div class=”link”>PROJECTS</div>
</div>
</nav>
<div class=”min-h-[100vh] w-[100%]”>
<section id=”about” class=”flex min-h-[100vh] items-center”>
<div>
<h1>Hello</h1>
</div>
</section>
<section id=”” class=”min-h-[100vh] “></section>
</div>
</body>
</html>
styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
height: 100%;
}
* {
box-sizing: border-box;
outline: 2px solid limegreen !important;
}
.link {
font-family: ‘Gantari’, sans-serif;
font-size: 22px;
font-weight: bold;
color: white;
}
أضف إجابة