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

user_16107135 0
Viewed 53

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:

/*-------------------------------------------- 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 ----------------------------------------------*/
<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>

flexbox css html
4 Answers

use bootstrap

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

do your icons class like this

<div class="icons row">
    <div class="col"><i class="fas fa-map-marker-alt fa-3x"></i></div>
    <div class="col">
        <h1>Address:</h1>
        <h2>INFO</h2>
    </div>
</div>
user_161502860

I'm pretty sure you are looking for this: Fax

.fax:before {
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
 content: "\f095";
}

Easiest and cleanest way.

user_161543690

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

Working example:

/*-------------------------------------------- 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 ----------------------------------------------*/
<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>

user_153773550

Here is working example and and explanation is below

.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;
}

.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;
}

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

.info {
    display: flex;
    flex-direction: column;
}

.info h1 {
    color: #1e90ff;
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
}

.info h2 {
    color: white;
}

.icons {
    display: flex;
    align-items: flex-start;
    column-gap: 10px;
    margin-bottom: 20px;
}

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

textarea {
    font-size: 15px;
    border: 2px solid #ccc;
    max-width: 250px;
    min-width: 250px;
    width: 250px;
    max-height: 350px;
    min-height: 100px;
    height: 100px;
}

input[type="submit"] {
    background-color: #1e90ff;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 75px 4px 2px;
    cursor: pointer;

}

@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;
    }
}
<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="data">
                <h1>Address:</h1>
                <h2>INFO</h2>
            </div>
        </div>
        <div class="icons">
            <i class="fas fa-phone-alt fa-3x"></i>
            <div class="data">
                <h1>Phone:</h1>
                <h2>INFO</h2>
            </div>
        </div>
        <div class="icons">
            <i class="fas fa-phone-alt fa-3x"></i>
            <div class="data">
                <h1>Fax:</h1>
                <h2>INFO</h2>
            </div>
        </div>
        <div class="icons">
            <i class="fas fa-envelope fa-3x"></i>
            <div class="data">
                <h1>Email:</h1>
                <h2>INFO</h2>
            </div>
        </div>
        <div class="icons">
            <i class="fas fa-mail-bulk fa-3x"></i>
            <div class="data">
                <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>

I had to make few changes in html as well as in css. html: this will not do

<div class="icons">
    <i class="fas fa-map-marker-alt fa-3x"></i>
    <h1> Address:</h1>
</div>
<h2>INFO</h2>

so I changes it into

<div class="icons">
    <i class="fas fa-map-marker-alt fa-3x"></i>
    <div class="data">
        <h1>Address:</h1>
        <h2>INFO</h2>
    </div>
</div>

This way you will be able to position your element as you described but in order to do this there is a need to make few changes in css

first of all you want text to be on top instead of bottom so

.icons {
    display: flex;
    align-items: flex-end;
}

you need to change into

.icons {
    display: flex;
    align-items: flex-start;
    column-gap: 10px;
    margin-bottom: 20px;
}

column-gap will create space between column in .icons element without the need of margin and margin-bottom will space .icons elements.
margin-bottom can be replaced with row-gap: 20px in .info element.

and lastly remove margin-top and margin-bottom from .info h1 just to make it pretty.

Hopy it helps

user_90742720
Related