I'm new to HTML and I am trying to add a new line between h1 and h2, here is the code
@font-face {
font-family: 'mainFont';
src: url("Fonts/Poppins/Poppins-Medium.ttf") format('truetype');
}
body {
height: 90vh;
display: flex;
align-items: center;
text-align: center;
justify-content: 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: 60px;
color: #181818;
}
.subMain {
font-family: 'mainFont';
font-weight: normal;
font-style: normal;
font-size: 45px;
color: #181818;
}<!DOCTYPE html>
<html lang='en'>
<head>
<link rel='stylesheet' href='style.css'>
</head>
<body>
<h1 class='main'>Hello World 👋</h1>
<h2 class='subMain'> I'm a Game Developer</h2>
</body>
</html>I've tried stuff like br but they don't at all work and I get a result something like this
Flexbox makes your elements displayed horizontally. You just need to remove display:flex on body styles that will help you to break it into 2 lines as usual.
h1 and h2 have their own default margin which makes a huge gap between them. To remove the margin gap between h1 and h2, you need to set margin like below
h2, h1 {
margin: 0;
}
@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: 60px;
color: #181818;
}
.subMain {
font-family: 'mainFont';
font-weight: normal;
font-style: normal;
font-size: 45px;
color: #181818;
}
/*Override default margin of h1 and h2*/
h2, h1 {
margin: 0;
}<!DOCTYPE html>
<html lang='en'>
<head>
<link rel='stylesheet' href='style.css'>
</head>
<body>
<h1 class='main'>Hello World 👋</h1>
<h2 class='subMain'> I'm a Game Developer</h2>
</body>
</html>Another approach for your case is adding another element in between of body and your content. In that situation, you don't need to modify body styles, all elements within additional div will be in the center by flexbox from body.
@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: 60px;
color: #181818;
}
.subMain {
font-family: 'mainFont';
font-weight: normal;
font-style: normal;
font-size: 45px;
color: #181818;
}
h2, h1 {
margin: 0;
}<!DOCTYPE html>
<html lang='en'>
<head>
<link rel='stylesheet' href='style.css'>
</head>
<body>
<div>
<h1 class='main'>Hello World 👋</h1>
<h2 class='subMain'> I'm a Game Developer</h2>
</div>
</body>
</html>If you want to add an empty space you can use: <br>
If you want to put a line you should use <hr>
You can then style the style with css.
Juste add <br> balise
<h1 class='main'>Hello World 👋</h1>
<br>
<h2 class='subMain'> I'm a Game Developer</h2>body {
height: 90vh;
text-align: center;
justify-content: center;
background: #f8f8f8;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}