Issue
Right now I’m having a hard time aligning two divisions vertically, something like this:
But they are not being aligned like that and instead, they are being aligned like this horizontally:
And here is my code:
@font-face {
font-family: 'mainFont';
src: url("Fonts/Poppins/Poppins-Medium.ttf") format('truetype');
}
body {
height: 90vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: #f8f8f8;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.main {
font-family: 'mainFont';
font-weight: normal;
font-style: normal;
font-size: 5.6vw;
color: #181818;
}
.subMain {
font-family: 'mainFont';
font-weight: normal;
font-style: normal;
font-size: 3.5vw;
color: #181818;
position: absolute;
}
.description {
font-family: 'mainFont';
font-weight: normal;
font-style: normal;
font-size: 2vw;
color: #181818;
position: absolute;
left: 20.6%;
bottom: 3%;
}
.typed-text {
color: chartreuse;
}
.space {
margin-top: 150px;
}
.container p span.typed-text {
font-family: 'mainFont';
font-weight: normal;
font-style: normal;
font-size: 3.5vw;
color: #181818;
}
.cursor {
animation: blinker 0.6s linear infinite;
color: #181818;
}
.cursor.typing {
animation: none;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
h2,
h1 {
margin: 0;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<link rel='stylesheet' href='style.css'>
</head>
<body>
<div>
<h1 class='main'>Hello üëã, I'm Saharsh.</h1>
<h1 class='subMain'>I am a <span class="typed-text"></span><span class="cursor"></span> </h1>
</div>
<div>
<h1 class='subMain'>Another Division</h1>
</div>
<script src='Scripts/TypeDeleteText.js'>
</script>
</body>
</html>
Solution
Your body is in flex put it in grid or add flex-direction: column; on your body. heres your code in grid.
@font-face {
font-family: 'mainFont';
src: url("Fonts/Poppins/Poppins-Medium.ttf") format('truetype');
}
body {
height: 90vh;
display: grid;
align-items: center;
justify-content: center;
text-align: center;
background: #f8f8f8;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.main {
font-family: 'mainFont';
font-weight: normal;
font-style: normal;
font-size: 5.6vw;
color: #181818;
}
.subMain {
font-family: 'mainFont';
font-weight: normal;
font-style: normal;
font-size: 3.5vw;
color: #181818;
position: absolute;
}
.description {
font-family: 'mainFont';
font-weight: normal;
font-style: normal;
font-size: 2vw;
color: #181818;
position: absolute;
left: 20.6%;
bottom: 3%;
}
.typed-text {
color: chartreuse;
}
.space {
margin-top: 150px;
}
.container p span.typed-text {
font-family: 'mainFont';
font-weight: normal;
font-style: normal;
font-size: 3.5vw;
color: #181818;
}
.cursor {
animation: blinker 0.6s linear infinite;
color: #181818;
}
.cursor.typing {
animation: none;
}
@keyframes blinker {
50% { opacity: 0; }
}
h2, h1 {
margin: 0;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<link rel='stylesheet' href='style.css'>
</head>
<body>
<div>
<h1 class='main'>Hello üëã, I'm Saharsh.</h1>
<h1 class='subMain'>I am a <span class="typed-text"></span><span class="cursor"></span> </h1>
</div>
<div>
<h1 class='subMain'>Another Division</h1>
</div>
<script src='Scripts/TypeDeleteText.js'>
</script>
</body>
</html>
Answered By – Crystal
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0