Creating a flexbox grid with images that resizes properly - html

Question

I'm creating a grid in flexbox that has images on one side and then text on the other. The problem I'm facing is that the images aren't aligning properly in the grid.
Here is my code:
/* iPhone */
#media only screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.body-img {
background: url('background-mobile.png') no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
height: 100vh;
width: 100%;
}
.search-img {
background: url('search-img-mobile.png') no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
height: 100vh;
padding-bottom: 10%;
}
.logo {
width: 150px;
margin-top: 15%;
}
h1,
h2 {
font-family: 'Open Sans', sans-serif;
color: #ffffff;
font-weight: 300;
padding-top: 20%;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.5em;
padding-bottom: 15%;
}
h3 {
font-family: 'Open Sans', sans-serif;
font-size: 1.0em;
font-weight: 400;
}
.searchbar {
margin-top: 15%;
}
.btn {
background-color: #1075C1;
color: #ffffff;
border-radius: 0px;
}
#keyframes bouncing {
0% {
bottom: 0;
}
50% {
bottom: 20px;
}
100% {
bottom: 0;
}
}
.arrow {
animation: bouncing 1s infinite ease-in-out;
bottom: 0;
display: block;
height: 26px;
left: 50%;
margin-left: -25px;
position: absolute;
width: 26px;
}
.left {
background-color: #1075C1;
}
.col-md-12 {
min-height: 0px;
}
.container-flex {
display: flex;
flex-direction: column-reverse !important;
justify-content: space-between;
}
.container-flex2 {
display: flex;
flex-direction: column-reverse !important;
justify-content: space-between;
}
.searchbox {
background-color: rgba(255, 255, 255, 0.6);
padding-top: 5%;
padding-left: 5%;
padding-right: 5%;
padding-bottom: 5%;
}
.form-check-label {
font-size: 0.8em;
}
.btn-lg {
padding-left: 25%;
padding-right: 25%;
padding-top: 5%;
padding-bottom: 5%;
}
.btn-lg:hover {
background-color: #003e6c;
}
}
#media only screen and (min-width: 1024px) {
body {
overflow-x: hidden;
}
.body-img {
background: url('nathan-dumlao-609935-unsplash.png') no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
height: 100vh;
width: 100%;
}
.logo {
width: 250px;
margin-top: 15%;
}
h1,
h2 {
font-family: 'Open Sans', sans-serif;
color: #ffffff;
font-weight: 300;
padding-top: 5%;
}
.searchbar {
margin-top: 8%;
}
.btn {
background-color: #1075C1;
color: #ffffff;
border-radius: 0px;
}
.arrow {
display: none;
}
.container-flex {
display: flex;
flex-direction: row !important;
justify-content: space-between;
background-color: #1075C1;
}
.container-flex2 {
display: flex;
flex-direction: row-reverse;
background-color: #1075C1;
justify-content: space-between;
}
.left {
background-color: #1075C1;
}
.description {
background-color: #1075C1;
}
}
<section id="one">
<div class="container-flex">
<div class="left">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 text-center">
<h2>Sign up for our career guide and receive free insight into available jobs</h2>
</div>
</div>
</div>
<div class="right">
<img src="section1-mobile.png" class="img-fluid">
</div>
</div>
<div class="container-flex2">
<div class="left">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 text-center">
<h2>Answer questions as we help you with your job search</h2>
</div>
</div>
</div>
<div class="right">
<img src="section2.png" class="img-fluid">
</div>
</div>
<div class="container-flex">
<div class="left">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 text-center">
<h2>Get matched with companies looking for talent like you</h2>
</div>
</div>
</div>
<div class="right">
<img src="section3.png" class="img-fluid">
</div>
</div>
</section>
The end result I'm looking for.
I'm not sure what I'm doing wrong in the CSS?

Answer 1

There's a few things to point out here that might help you in getting things how you want them to look.
Firstly, your indentation in your markup is a wee bit skew, so, at first glance, it's a little bit tricky to figure out, sorting the indentation in both your markup and css will make it easier for you, and others, to debug.
Secondly, you've got a lot of superfluous styles / class in your markup that look like they're from bootstrap. These could potentially be affecting your own custom styles and causing conflicts.
Thirdly you've got an awful lot going on in terms nesting in your markup that makes it difficult to apply styles too.
I would suggest simplifying your markup first.
I would also suggest stripping back your css to the bare minimum needed, removing your vendor prefixes (-webkit-, -o-), the #keyframes declaration (or at the very least commenting them out). You can always add them after or put you css through a preprocessor or autoprefixer afterwards but for debugging they can make things difficult.
Flexbox can be a bit tricky at times, so I put together a pen on codepen showing how I would approach your mockup (full code below). It's just a quick draft but maybe some other community members will have some input / suggestions. In the meantime have a play around with the values and look at the outcome.
I'd also recommend this SO question regarding flexbox, the top answer is fairly concise about horizontal and vertical alignment. I'd also recommend checking out flex box froggy for honing you flex box skills.
markup:
<section class="section">
<div class="row">
<div class="content">
<span class="icon">🎨</span>
<span class="text">here is some text</span>
</div>
<img class="image" src="http://lorempixel.com/400/200" />
</div>
<div class="row">
<div class="content">
<span class="icon">🐳</span>
<span class="text">here is some other text</span>
</div>
<img class="image" src="http://lorempixel.com/400/200" />
</div>
<div class="row">
<div class="content">
<span class="icon">💰</span>
<span class="text">here is some more text</span>
</div>
<img class="image" src="http://lorempixel.com/400/200" />
</div>
</section>
css:
body {
width: 100%;
text-align: center;
font-family: sans-serif;
}
.section, .row {
width: 75vw;
background: dodgerblue;
color: #fff;
font-size: 1.5em;
}
.section {
display: inline-block;
}
.row {
display: flex;
justify-content: space-between;
flex-direction: row;
}
.row:nth-child(odd) {
flex-direction: row-reverse;
}
.content {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.text {
width: 50%;
text-align: center;
}
.image {
width: 50%;
height: auto;
}
.icon {
font-size: 1.5em;
}
I hope this helps.

Answer 2

I have tested both snippets on screen size (1024x786) and ipad pro (1024x1366)
/* iPhone */
.left {
width: 50%;
left: 0px;
}
.right {
width: 50%;
right: 0px;
}
h2 {
font-family: arial !important;
}
#media only screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.body-img {
background: url('background-mobile.png') no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
height: 100vh;
width: 100%;
}
.search-img {
background: url('search-img-mobile.png') no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
height: 100vh;
padding-bottom: 10%;
}
.logo {
width: 150px;
margin-top: 15%;
}
h1, h2 {
font-family: 'Open Sans', sans-serif;
color: #ffffff;
font-weight: 300;
padding-top: 20%;
}
h1 {
font-size: 1.3em;
}
h2 {
font-size: 1.3em;
padding-bottom: 15%;
}
h3 {
font-family: 'Open Sans', sans-serif;
font-size: 1.0em;
font-weight: 400;
}
.searchbar {
margin-top: 15%;
}
.btn {
background-color: #1075C1;
color: #ffffff;
border-radius: 0px;
}
.arrow {
animation: bouncing 1s infinite ease-in-out;
bottom: 0;
display: block;
height: 26px;
left: 50%;
margin-left: -25px;
position: absolute;
width: 26px;
}
.left {
background-color: #1075C1;
}
.col-md-12 {
min-height: 0px;
}
.container-flex {
display: flex;
justify-content: space-between;
}
.container-flex2 {
display: flex;
justify-content: space-between;
}
.searchbox {
background-color: rgba(255, 255, 255, 0.6);
padding-top: 5%;
padding-left: 5%;
padding-right: 5%;
padding-bottom: 5%;
}
.form-check-label {
font-size: 0.8em;
}
.btn-lg {
padding-left: 25%;
padding-right: 25%;
padding-top: 5%;
padding-bottom: 5%;
}
.btn-lg:hover {
background-color: #003e6c;
}
.text-center {
height: 200px;
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
}
.text-center h2 {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
}
#media only screen and (min-width: 1024px) {
body {
overflow-x: hidden;
}
.body-img {
background: url('nathan-dumlao-609935-unsplash.png') no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
height: 100vh;
width: 100%;
}
.logo {
width: 250px;
margin-top: 15%;
}
h1, h2 {
font-family: 'Open Sans', sans-serif;
color: #ffffff;
font-weight: 300;
padding-top: 5%;
}
.searchbar {
margin-top: 8%;
}
.btn {
background-color: #1075C1;
color: #ffffff;
border-radius: 0px;
}
.arrow {
display: none;
}
.container-flex {
display: flex;
justify-content: space-between;
background-color: #1075C1;
}
.container-flex2 {
display: flex;
flex-direction: row-reverse;
background-color: #1075C1;
justify-content: space-between;
}
.left {
background-color: #1075C1;
}
.description {
background-color: #1075C1;
}
.text-center {
height: 500px;
line-height: 500px;
text-align: center;
border: 2px dashed #f69c55;
}
.text-center h2 {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="one">
<div class="container-flex">
<div class="left">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 text-center">
<h2>Sign up for our career guide and receive free insight into available jobs</h2>
</div>
</div>
</div>
<div class="right">
<img src="https://dummyimage.com/500x500/000/fff" class="img-fluid">
</div>
</div>
<div class="container-flex2">
<div class="right">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 text-center">
<h2>Answer questions as we help you with your job search</h2>
</div>
</div>
</div>
<div class="left">
<img src="https://dummyimage.com/500x500/000/fff" class="img-fluid">
</div>
</div>
<div class="container-flex">
<div class="left">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 text-center">
<h2>Get matched with companies looking for talent like you</h2>
</div>
</div>
</div>
<div class="right">
<img src="https://dummyimage.com/500x500/000/fff" class="img-fluid">
</div>
</div>
</section>
</body>
</html>
I also attached output screenshots for both size
Hope, you find your solution.

Answer 3

Use <img> instead of background image, because you can make them responsive more easy with
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
Therefore use big sizes for the images so that they always fill up the space.
Use flex-basis to handle width, e.g. 60% for the left side and 40% for the right side.
Make the container flex-wrap: wrap so that the columns in the container are wrapped and not in a row.
Set the column inside a container
.container > div {
display: flex;
flex-direction: column;
justify-content: center; // Center vertically
align-items: center; // Center horizontally
}
to center the content within horizontally and vertically.
Example
body {
background: black;
}
.container {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
max-width: 960px;
border: 3px solid white;
background: #0F75C0;
}
.container>div {
display: flex;
flex-direction: column;
box-sizing: border-box;
justify-content: center;
align-items: center;
}
/* Columns on the left side */
.container>div:nth-child(odd) {
flex-basis: 60%;
}
/* Columns on the right side */
.container>div:nth-child(even) {
flex-basis: 40%;
}
/* Make images responsive */
.container>div>img {
display: block;
height: auto;
max-width: 100%;
}
.container .info {
max-width: 70%;
text-align: center;
padding: 15px;
font-size: 22px;
color: white;
}
#media screen and (max-width: 320px) {
.container {
flex-direction: column;
}
}
<div class="container">
<div>
<div class="info">
<img src="http://via.placeholder.com/48x48?text=icon" alt="">
<p>Sign up for our career guide</p>
</div>
</div>
<div>
<img src="http://via.placeholder.com/800x600" alt="">
</div>
<div>
<img src="http://via.placeholder.com/1000x500" alt="">
</div>
<div>
<div class="info">
<img src="http://via.placeholder.com/48x48?text=icon" alt="">
<p>Answer a few questions as we aid you in your job search</p>
</div>
</div>
<div>
<div class="info">
<img src="http://via.placeholder.com/48x48?text=icon" alt="">
<p>Get matched with companies looking for talent like you</p>
</div>
</div>
<div>
<img src="http://via.placeholder.com/800x600" alt="">
</div>
</div>