Align Texts below Button Containers

byMR

July 16, 2023

This is how my current page looks:

Current

This is the expected result:

Expected

Furthermore, when the screen is minimised and the screen width is reduced, the texts shouldn’t look sloppy and out of position. Instead, they should resize and maintain the same position according to the width of the screen.

<body>
  <h1>MedConnect</h1>
  <h2>Please select your Role</h2>
  <div class="btn-container">
    <a style="background-color: #A4907C;" href="process_role.php?role=user" class="btn"><i class="fa-solid fa-user"></i><span style="font-family: Lora;">User</span></a>
    <a style="background-color: #5A96E3;" href="process_role.php?role=consultant" class="btn"><i class="fa-solid fa-hand-holding-medical"></i><span>Consultant</span></a>
  </div>

  <div class="texts">
    <h5>Sign Up as a User on MedConnect</h5>
    <h5>Sign Up as a Consultant on MedConnect</h5>
  </div>

  <script defer src="https://use.fontawesome.com/releases/v6.4.0/js/all.js"></script>
</body>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
    body {
      font-family: Lora;
      text-align: center;
      margin-top: 100px;
      background-color: #DBE2EF;
    }

    h1 {
      font-size: 40px;
      margin-bottom: 20px;
    }

    h2 {
      margin-top: 50px;
    }

    .btn-container {
      display: flex;
      justify-content: center;
      margin-top: 200px;
    }

    .btn {
      display: inline-block;
      padding: 10px 20px;
      font-size: 50px;
      border-radius: 5px;
      background-color: #3498db;
      color: black;
      text-decoration: none;
      margin: 0 100px;
    }

    .btn-container a {
      width:15%;
    }

    .btn-container a span {
      font-size: 20px;
      padding-top: 10px;
      display: block;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

  </style>

>Solution :

The best way to do it will be to bring the texts within the btn-container so I had to change the markup a little bit and added the required CSS and commented out that were not necessary.

I think you can do the other changes easily from here.

@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
body {
  font-family: Lora;
  text-align: center;
  margin-top: 100px;
  background-color: #DBE2EF;
}

h1 {
  font-size: 40px;
  margin-bottom: 20px;
}

h2 {
  margin-top: 50px;
}

.btn-container {
  display: flex;      
  justify-content: center;
  margin-top: 200px;
}

.btn-container div{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 50px;
  border-radius: 5px;
  background-color: #3498db;
  color: black;
  text-decoration: none;
  margin: 0 100px;
}

.btn-container a {
  /* width:15%; */
  width: 60%;
}

.btn-container a span {
  font-size: 20px;
  padding-top: 10px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 1px;
}

<body>
  <h1>MedConnect</h1>
  <h2>Please select your Role</h2>
  <div class="btn-container">
    <div>
      <a style="background-color: #A4907C;" href="process_role.php?role=user" class="btn"><i class="fa-solid fa-user"></i><span style="font-family: Lora;">User</span></a>
      <h5>Sign Up as a User on MedConnect</h5>
    </div>

    <div>
      <a style="background-color: #5A96E3;" href="process_role.php?role=consultant" class="btn"><i class="fa-solid fa-hand-holding-medical"></i><span>Consultant</span></a>
      <h5>Sign Up as a Consultant on MedConnect</h5>
    </div>
  </div>

  <!-- <div class="texts">
    <h5>Sign Up as a User on MedConnect</h5>
    <h5>Sign Up as a Consultant on MedConnect</h5>
  </div> -->

  <script defer src="https://use.fontawesome.com/releases/v6.4.0/js/all.js"></script>
</body>