CODEWITHSUNDEEP
htmlcss
matt.mcg
matt.mcg

Reputation: 429

Need some help positioning a header and sub heading

heres my code: https://codepen.io/anon/pen/dEqJLr#anon-login heres what I'm trying to do: https://i.sstatic.net/PqD2G.jpg basically I want the sub header ("helpthistext") to be above my header and I'm not sure how to achieve this.. 

body,
html {
  font-family: 'Montserrat';
  margin: 0;
  height: 100%;
}

body {
  background-color: red;
}

.newtest {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 75%;
}
<div class="newtest">
  <span class="sub-head">helpthistext</span>
  <h1 class="main-head">title one & another one</h1>
</div>

Upvotes: 0

Views: 116

Answers (4)

Yasir
Yasir

Reputation: 1

Try below Code...

<div class="myDiv">
  <h3>helpthistext</h3>
  <h1>title one & another one</h1>
</div>

.myDiv {
  margin: 20px auto;
  width: 50%;
}

.myDiv h3 {
  margin: 0px;
}

.myDiv h1 {
  margin: 0;
}

Upvotes: 0

Rounin
Rounin

Reputation: 29463

It probably makes sense to have the .sub-head appear beneath the .main-head in the markup, even if you want to visually display it above the main heading in the browser viewport.

To achieve this, apply display: flex to .newtest and then:

  • give .main-head an order of 2

  • give .sub-head an order of 1

    Working Example:

.newtest {
display: flex;
flex-wrap: wrap;
}

.main-head {
order: 2;
width: 100%;
margin-top: 0;
}

.sub-head {
width: 100%;
order: 1;
font-size: 16px;
}
<div class="newtest">    
<h1 class="main-head">title one &amp; another one</h1>
<div class="sub-head">helpthistext</div>
</div>

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115066

flex-direction:column is what you are after

body,
html {
  font-family: 'Montserrat';
  margin: 0;
  height: 100%;
}

body {
  background-color: red;
text-align:Center;
}

.newtest {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 75%;
}
<div class="newtest">
  <span class="sub-head">helpthistext</span>
  <h1 class="main-head">title one & another one</h1>
</div>

Upvotes: 1

Vignesh G
Vignesh G

Reputation: 1

Please add the flex direction to the newtest.

.newtest {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 75%;
      flex-direction: column;
}

Upvotes: 0

Related Questions