How to add new line in html between h1 and h2

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

>Solution :

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>

Leave a Reply