Is it possible to move my text side by side with my icon
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
------
|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
Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.