Is it possible to move my text side by side with my icon

by Code Error
Posted By: Anonymous

I’ve been looking into my contact page on this website I’m creating and I’m trying to my text line up beside my icon but I can’t seem to line it up properly. Here Is what I’m looking for. I’ve been trying to look through it and I’m getting a lot of struggles if possible thank you for the help

Issue via picture

Issue

------
|ICON| Address:
|    | Information
------

But instead Im getting this:

------
|ICON| 
|    | Address:
------
Information

Here is my code:

_x000D_

_x000D_

/*-------------------------------------------- STYLING FOR CONTACT PAGE ----------------------------------------------*/
.back-container {
  height: 150vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/heroImage.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Form styling for contact page */
.formContainer {
  border-radius: 5px;
  background-color: white;
  padding: 20px;
  border-left: solid 70px transparent;
  border-right: solid 70px transparent;
  border-bottom: solid 70px #fff;
  filter: drop-shadow(0 0 30px #333);
  z-index: 100;
}

.formText {
  color: black;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 2px solid #1e90ff;
}

.formContent {
  margin-top: 5px;
}

/* Styling for the text inputs */
input[type=text] {
  font-size: 20px;
  border: 2px solid #ccc;
  width: 250px;
  height: 50px;
}

/* Styling for info div */
.info {
  display: flex;
  flex-direction: column;
}

.info h1 {
  color: #1e90ff;
  margin-left: 10px;
  display: inline-block;
}

.info h2 {
  color: white;
}

/* Styling for the icons */
.icons {
  display: flex;
  align-items: flex-end;
}

.icons>i {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: white;
  padding: 28px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

/* Styling for text area */
textarea {
  font-size: 15px;
  border: 2px solid #ccc;
  max-width: 250px;
  min-width: 250px;
  width: 250px;
  max-height: 350px;
  min-height: 100px;
  height: 100px;
}

/* Styling for the submit button */
input[type=submit] {
  background-color: #1e90ff;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  margin-left: 75px;
}
/*-------------------------------------------- STYLING FOR CONTACT PAGE END ----------------------------------------------*/



/*-------------------------------------------- RESPONSIVENESS FOR CONTACT PAGE ----------------------------------------------*/
@media (max-width: 1011px) {

  .back-container {
    height: 200vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/heroImage.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  
}

@media (max-height: 700px) {

  .back-container {
    height: 400vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/heroImage.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
}

/*-------------------------------------------- RESPONSIVENESS FOR CONTACT PAGE END ----------------------------------------------*/

_x000D_

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">

<!-- Container for the entire page !-->
<div class="back-container">
  <div class="info" style="float: left; padding: 150px;">
    <!-- All icons being used for information !-->
    <div class="icons">
      <i class="fas fa-map-marker-alt fa-3x"></i>
      <h1> Address:</h1>

    </div>
    <h2>INFO</h2>
    <div class="icons">
      <i class="fas fa-phone-alt fa-3x"></i>
      <h1> Phone:</h1>
    </div>
    <h2>INFO</h2>
    <div class="icons">
      <i class="fas fa-phone-alt fa-3x"></i>
      <h1> Fax:</h1>
    </div>
    <h2>INFO</h2>
    <div class="icons">
      <i class="fas fa-envelope fa-3x"></i>
      <h1> Email:</h1>
    </div>
    <h2>INFO</h2>
    <div class="icons">
      <i class="fas fa-mail-bulk fa-3x"></i>
      <h1> P.O Box:</h1>
    </div>
    <h2>INFO</h2>
  </div>
  <!-- Container for the forms !-->
  <div class="formContainer">
    <form action="https://formsubmit.co/" method="POST">
      <div class="formText">
        <h1>Name:</h1>
      </div>
      <div class="formContent">
        <input type="text" name="name" required="required">
      </div>
      <div class="formText">
        <h1>Email:</h1>
      </div>
      <div class="formContent">
        <input type="text" name="email" required="required">
      </div>
      <div class="formText">
        <h1>Phone Number:</h1>
      </div>
      <div class="formContent">
        <input type="text" name="phone" required="required">
      </div>
      <div class="formText">
        <h1>Message:</h1>
      </div>
      <div class="formContent">
        <textarea required="required" name="message"></textarea>
      </div>
      <div class="formContent">
        <input type="submit" value="Submit">
      </div>
    </form>
  </div>
</div>

_x000D_

_x000D_

_x000D_

Solution

You could wrap the two headings in a div with flex-direction: column.

Working example:

_x000D_

_x000D_

/*-------------------------------------------- STYLING FOR CONTACT PAGE ----------------------------------------------*/
.back-container {
  height: 150vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/heroImage.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Form styling for contact page */
.formContainer {
  border-radius: 5px;
  background-color: white;
  padding: 20px;
  border-left: solid 70px transparent;
  border-right: solid 70px transparent;
  border-bottom: solid 70px #fff;
  filter: drop-shadow(0 0 30px #333);
  z-index: 100;
}

.formText {
  color: black;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 2px solid #1e90ff;
}

.formContent {
  margin-top: 5px;
}

/* Styling for the text inputs */
input[type=text] {
  font-size: 20px;
  border: 2px solid #ccc;
  width: 250px;
  height: 50px;
}

/* Styling for info div */
.info {
  display: flex;
  flex-direction: column;
}

.info h1 {
  color: #1e90ff;
  margin-left: 10px;
  display: inline-block;
}

.info h2 {
  color: white;
}

/* Styling for the icons */
.icons {
  display: flex;
  align-items: center;
}

.icons>i {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: white;
  padding: 28px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.icon-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Styling for text area */
textarea {
  font-size: 15px;
  border: 2px solid #ccc;
  max-width: 250px;
  min-width: 250px;
  width: 250px;
  max-height: 350px;
  min-height: 100px;
  height: 100px;
}

/* Styling for the submit button */
input[type=submit] {
  background-color: #1e90ff;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  margin-left: 75px;
}
/*-------------------------------------------- STYLING FOR CONTACT PAGE END ----------------------------------------------*/



/*-------------------------------------------- RESPONSIVENESS FOR CONTACT PAGE ----------------------------------------------*/
@media (max-width: 1011px) {

  .back-container {
    height: 200vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/heroImage.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  
}

@media (max-height: 700px) {

  .back-container {
    height: 400vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/heroImage.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
}

/*-------------------------------------------- RESPONSIVENESS FOR CONTACT PAGE END ----------------------------------------------*/

_x000D_

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">

<!-- Container for the entire page !-->
<div class="back-container">
  <div class="info" style="float: left; padding: 150px;">
    <!-- All icons being used for information !-->
    <div class="icons">
      <i class="fas fa-map-marker-alt fa-3x"></i>
      <div class="icon-info">
        <h1> Address:</h1>
        <h2>INFO</h2>
      </div>
    </div>
    <div class="icons">
      <i class="fas fa-phone-alt fa-3x"></i>
      <div class="icon-info">
        <h1> Phone:</h1>
        <h2>INFO</h2>
      </div>
    </div>
    <div class="icons">
      <i class="fas fa-phone-alt fa-3x"></i>
      <div class="icon-info">
        <h1> Fax:</h1>
        <h2>INFO</h2>
      </div>
    </div>
    <div class="icons">
      <i class="fas fa-envelope fa-3x"></i>
      <div class="icon-info">
        <h1> Email:</h1>
        <h2>INFO</h2>
      </div>
    </div>
    <div class="icons">
      <i class="fas fa-mail-bulk fa-3x"></i>
      <div class="icon-info">
        <h1> P.O Box:</h1>
        <h2>INFO</h2>
      </div>
    </div>
  </div>
  <!-- Container for the forms !-->
  <div class="formContainer">
    <form action="https://formsubmit.co/" method="POST">
      <div class="formText">
        <h1>Name:</h1>
      </div>
      <div class="formContent">
        <input type="text" name="name" required="required">
      </div>
      <div class="formText">
        <h1>Email:</h1>
      </div>
      <div class="formContent">
        <input type="text" name="email" required="required">
      </div>
      <div class="formText">
        <h1>Phone Number:</h1>
      </div>
      <div class="formContent">
        <input type="text" name="phone" required="required">
      </div>
      <div class="formText">
        <h1>Message:</h1>
      </div>
      <div class="formContent">
        <textarea required="required" name="message"></textarea>
      </div>
      <div class="formContent">
        <input type="submit" value="Submit">
      </div>
    </form>
  </div>
</div>

_x000D_

_x000D_

_x000D_

Answered By: Anonymous

Related Articles

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Leave a Reply

Your email address will not be published. Required fields are marked *