Question

0

177

Views

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

about 4 years ago · Juan Pablo Isaza

3 answers

Answer question

0

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.

about 4 years ago · Juan Pablo Isaza Report

0

Juste add <br> balise

<h1 class='main'>Hello World 👋</h1>
<br>
<h2 class='subMain'> I'm a Game Developer</h2>

And change your body css to this:

body {
  height: 90vh;
  text-align: center;
  justify-content: center;
  background: #f8f8f8;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

about 4 years ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Accepted Answer · 2022-06-30T09:06:32.031Z

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>

0

177

How to add new line in html between h1 and h2

3 answers

0

0

0

Find remote jobs

Andres GPT