I'm trying to have two divs next to each other, picture on left, information on right, and I need them to stack (in the center) when screen size gets smaller.
Every time I try to fix it, the images stay floated to either side of the screen so they're not centered.
How can I accomplish this in either CSS or possibly JQuery?
/* ------------------ team ------------------------------------*/
#team {
background-color: #0370AD;
background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), #0370AD;
min-height: 115vh;
width: 100%;
text-align: center;
font-family: "Open Sans";
letter-spacing: 3px;
display: inline-block;
}
#team #teamheader {
text-align: center;
color: white;
font-size: 60px;
padding-top: 30px;
}
#team h2 {
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
}
#team p {
color: white;
height: 20px;
font-size: 30px;
}
/* ------------------ profile divs ---------------------------*/
.profpics {
height: 400px;
width: 100%;
text-align: center;
margin-left: auto;
margin-right: auto;
padding-top: 100px;
border: 2px solid black;
}
.team_image {
height: 300px;
width: 550px;
float: left;
border: 2px solid black;
}
.team_image img {
height: 300px;
width: 300px;
border: 2px solid black;
}
.team_info {
text-align: center;
width: 600px;
height: 60%;
margin-left: 3%;
float: right;
border: 2px solid black;
}
.profpics h1 {
font-family: Oswald;
text-align: center;
width: 100%;
font-size: 50px;
letter-spacing: 3px;
color: white;
padding-top: 10px;
padding-bottom: 10px;
border-top: 4px solid black;
border-bottom: 4px solid black;
}
.profpics h2 {
font-size: 35px;
color: white;
}
<div id="team">
<h1 id="teamheader">Our Team</h1>
<!-- profile divs -->
<div class="profpics">
<div class="team_image">
<img src="http://ift.tt/2iaD8vb">
</div>
<div class="team_info">
<h1>Name</h1>
<h2>Chief Executive Officer</h2>
<p>email</p>
</div>
</div>
<div class="profpics">
<div class="team_image">
<img src="http://ift.tt/2iaD8vb">
</div>
<div class="team_info">
<h1>Name</h1>
<h2>Chief Technology Officer</h2>
<p>email</p>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire