How to move my text under the bigger text-CodePudding

I want to place the "Page Unfound" text underneath the 404 text so that they stack sort of on top of one and other. Thanks for the help !

Here is the code

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .shell {
      height: 95vh;
      justify-content: center;
      display: flex;
      flex-direction: row;
      flex-basis: auto;
      margin: 5px 20px;
      align-items: center;
      flex-wrap: wrap;
      color: #D32F2F;
      text-align: center;
    }
    
    .bigtext {
      font-size: 96px;
    }
    
    .smalltext {
      font-size: 24px;
    }
  </style>
</head>

<body>
  <div >
    <div >404</div>
    <div >Page Unfound</div>
  </div>
</body>

</html>

CodePudding user response：

Since the flex container aligns its immediate children in a line, all you need is to make the elements into 1 element.

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .shell {
      height: 95vh;
      justify-content: center;
      display: flex;
      flex-direction: row;
      flex-basis: auto;
      margin: 5px 20px;
      align-items: center;
      flex-wrap: wrap;
      color: #D32F2F;
      text-align: center;
    }
    
    .bigtext {
      font-size: 96px;
    }
    
    .smalltext {
      font-size: 24px;
    }
  </style>
</head>

<body>
  <div >
    <span>
    <div >404</div>
    <div >Page Unfound</div>
    </span>
  </div>
</body>

</html>

CodePudding user response：

All you need to change is flex-direction from row to column

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .shell {
      height: 95vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 5px;
      color: #D32F2F;
      text-align: center;
    }
    
    .bigtext {
      font-size: 96px;
    }
    
    .smalltext {
      font-size: 24px;
    }
  </style>
</head>

<body>
  <div >
    <div >404</div>
    <div >Page Unfound</div>
  </div>
</body>

</html>