I have set up a flex box layout and you can view the codepen link here:- https://codepen.io/scottYg55/pen/zYYWbJG.
My goal is to make the pink backgrounds in this flexbox 50% of the height, along with the background image so it resembles more of a grid system.
However, I am facing an issue where the pink background is not expanding its width regardless of what I attempt. I simply want all images and pink backgrounds to be the exact same height. Would using CSS grid be a better solution?
If anyone could provide assistance, I would greatly appreciate it!
HTML
<div class="blog-contl row">
<div class="col">
<div class="blog-half">
<div class="blog-half-img" style="background-image:url('http://www.project-progress.co.uk/cloudhouse/site/wp-content/uploads/blog6.jpg')">
</div>
<div class="blog-half-cont">
<h4>Test Post 12</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<div class="main-button">
<a href="http://www.project-progress.co.uk/cloudhouse/site/test-post-12/" title="Read More" class="btn-default">Read More</a>
</div>
</div>
</div>
</div>
<!-- Repeat for other columns -->
</div>
CSS
.row {display:flex;}
.blog-contl img {width:auto;}
.blog-contl .row {
display: flex;
flex-wrap: wrap;
}
/* Styles for blog-half elements */
.blog-contl .col {padding:0;}
.blog-half-img {
background-size: cover;
background-repeat: no-repeat;
width: 100%;
padding-bottom: 50%;
}
.blog-half-cont {
background: #da55c9;
margin: 0;
padding: 40px;
box-sizing: border-box;
text-align: center;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
}
.blog-half {display:flex;flex-wrap:wrap;}
.col:nth-of-type(2) .blog-half .blog-half-cont {
order:1;
}
.col:nth-of-type(2) .blog-half .blog-half-img {
order:2;
}
Any help will be highly appreciated! Thank you!