Okay so I'm setting up the styling for a blog archive page in WP, and I'm running into a flexbox issue.
I've checked numerous similar questions but I can't seem to make heads or tails of what I'm doing wrong.
EDIT: this has been marked as a duplicate. And while it is true that there are many posts on this website detailing people having trouble using flexbox to center things, those solutions have not worked for me, and I think that it's something specific about my code that is bugging things up.
That is one reason why I explicit ask in the title if there are height, width, display, or position requirements for flexbox to function normally because I use min-width and min-height, not explicit width and height, and I think from some of the other posts that might be part of the problem but I can't find the part of the flexbox specification that details that behavior.
Here's a codepen with my code.
https://codepen.io/thedonquixotic/pen/yPGPmj
And here's the code itself:
<section class=" blog-post-section container-fluid">
<a href="http://www.josvanriswick.com/images/apple-pear-stilllife_400.jpg">
<div class="img-container rellax" data-rellax-speed="-4">
<img class="section-img rellax" data-rellax-speed="-6" src="http://www.cashartblog.com/wp-content/uploads/2012/09/peppers7.jpg">
<polygon points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 345.606,368.713 476.213,238.106 " fill="#FFFFFF">
</polygon></div>
<div class="title-card-flex">
<h1 class="class-study-title"> <span class="">Test Post Nietzsche</span></h1>
<p class="blog-summary"><span>War spirit strong sexuality will play right deceptions noble prejudice noble derive chaos. Burying disgust contradict passion overcome. Chaos play evil reason hope of overcome oneself pinnacle spirit enlightenment. Will ascetic ubermensch holiest superiority sea selfish pious law. Overcome selfish chaos snare convictions truth deceptions snare reason. Self noble salvation insofar god christian joy marvelous. […]</span></p>
</div>
</a>
</section>
<section class=" blog-post-section container-fluid">
<a href="http://www.josvanriswick.com/images/apple-pear-stilllife_400.jpg">
<div class="img-container rellax" data-rellax-speed="-4">
<img class="section-img rellax" data-rellax-speed="-6" src="http://www.cashartblog.com/wp-content/uploads/2012/09/peppers7.jpg">
<polygon points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 345.606,368.713 476.213,238.106 " fill="#FFFFFF">
</polygon></div>
<div class="title-card-flex">
<h1 class="class-study-title"> <span class="">Test Post Nietzsche</span></h1>
<p class="blog-summary"><span>War spirit strong sexuality will play right deceptions noble prejudice noble derive chaos. Burying disgust contradict passion overcome. Chaos play evil reason hope of overcome oneself pinnacle spirit enlightenment. Will ascetic ubermensch holiest superiority sea selfish pious law. Overcome selfish chaos snare convictions truth deceptions snare reason. Self noble salvation insofar god christian joy marvelous. […]</span></p>
</div>
</a>
</section>
<section class=" blog-post-section container-fluid">
<a href="http://www.josvanriswick.com/images/apple-pear-stilllife_400.jpg">
<div class="img-container rellax" data-rellax-speed="-4">
<img class="section-img rellax" data-rellax-speed="-6" src="http://www.cashartblog.com/wp-content/uploads/2012/09/peppers7.jpg">
<polygon points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 345.606,368.713 476.213,238.106 " fill="#FFFFFF">
</polygon></div>
<div class="title-card-flex">
<h1 class="class-study-title"> <span class="">Test Post Nietzsche</span></h1>
<p class="blog-summary"><span>War spirit strong sexuality will play right deceptions noble prejudice noble derive chaos. Burying disgust contradict passion overcome. Chaos play evil reason hope of overcome oneself pinnacle spirit enlightenment. Will ascetic ubermensch holiest superiority sea selfish pious law. Overcome selfish chaos snare convictions truth deceptions snare reason. Self noble salvation insofar god christian joy marvelous. […]</span></p>
</div>
</a>
</section>
<section class=" blog-post-section container-fluid">
<a href="http://www.josvanriswick.com/images/apple-pear-stilllife_400.jpg">
<div class="img-container rellax" data-rellax-speed="-4">
<img class="section-img rellax" data-rellax-speed="-6" src="http://www.cashartblog.com/wp-content/uploads/2012/09/peppers7.jpg">
<polygon points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 345.606,368.713 476.213,238.106 " fill="#FFFFFF">
</polygon></div>
<div class="title-card-flex">
<h1 class="class-study-title"> <span class="">Test Post Nietzsche</span></h1>
<p class="blog-summary"><span>War spirit strong sexuality will play right deceptions noble prejudice noble derive chaos. Burying disgust contradict passion overcome. Chaos play evil reason hope of overcome oneself pinnacle spirit enlightenment. Will ascetic ubermensch holiest superiority sea selfish pious law. Overcome selfish chaos snare convictions truth deceptions snare reason. Self noble salvation insofar god christian joy marvelous. […]</span></p>
</div>
</a>
</section>
<section class=" blog-post-section container-fluid">
<a href="http://www.josvanriswick.com/images/apple-pear-stilllife_400.jpg">
<div class="img-container rellax" data-rellax-speed="-4">
<img class="section-img rellax" data-rellax-speed="-6" src="http://www.cashartblog.com/wp-content/uploads/2012/09/peppers7.jpg">
<polygon points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 345.606,368.713 476.213,238.106 " fill="#FFFFFF">
</polygon></div>
<div class="title-card-flex">
<h1 class="class-study-title"> <span class="">Test Post Nietzsche</span></h1>
<p class="blog-summary"><span>War spirit strong sexuality will play right deceptions noble prejudice noble derive chaos. Burying disgust contradict passion overcome. Chaos play evil reason hope of overcome oneself pinnacle spirit enlightenment. Will ascetic ubermensch holiest superiority sea selfish pious law. Overcome selfish chaos snare convictions truth deceptions snare reason. Self noble salvation insofar god christian joy marvelous. […]</span></p>
</div>
</a>
</section>
<section class=" blog-post-section container-fluid">
<a href="http://www.josvanriswick.com/images/apple-pear-stilllife_400.jpg">
<div class="img-container rellax" data-rellax-speed="-4">
<img class="section-img rellax" data-rellax-speed="-6" src="http://www.cashartblog.com/wp-content/uploads/2012/09/peppers7.jpg">
<polygon points="345.606,107.5 324.394,128.713 418.787,223.107 0,223.107 0,253.107 418.787,253.107 324.394,347.5 345.606,368.713 476.213,238.106 " fill="#FFFFFF">
</polygon></div>
<div class="title-card-flex">
<h1 class="class-study-title"> <span class="">Test Post Nietzsche</span></h1>
<p class="blog-summary"><span>War spirit strong sexuality will play right deceptions noble prejudice noble derive chaos. Burying disgust contradict passion overcome. Chaos play evil reason hope of overcome oneself pinnacle spirit enlightenment. Will ascetic ubermensch holiest superiority sea selfish pious law. Overcome selfish chaos snare convictions truth deceptions snare reason. Self noble salvation insofar god christian joy marvelous. […]</span></p>
</div>
</a>
section.blog-post-section {
width: 100%;
position: relative;
min-height: 450px;
overflow: hidden;
z-index: 2000;
padding: 0px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
a {
height: 100%;
width: 100%;
text-decoration: none;
z-index: 5000;
cursor: pointer !important;
display: flex;
flex: 1;
div.overlay {
position: absolute;
z-index: 3000;
width: 100%;
height: 100%;
box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.5));
}
//end overlay container
div.img-container {
position: absolute;
display: flex;
min-width: 50%;
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
img.section-img {
position: relative;
min-width: 100%;
min-height: calc(100% + 200px);
z-index: 2000 !important;
filter: blur(2px);
top: -100px;
right: 0;
margin: 0 auto;
}
svg {
float: right;
background-color: black;
}
}
//end image container
div.title-card-flex {
padding: 50px;
position: absolute;
height: 100%;
width: calc(50% - 100px);
flex-direction: column;
justify-content: left;
align-items: flex-start;
z-index: 4000;
background: white;
h1 {
position: relative;
background-color: black;
font-family: 'AllerBold', Arial, sans-serif;
color: white;
text-align: left;
text-shadow: 0 2px 2px rgba(0, 0, 0, .35);
max-width: 90vw;
margin: 50px 10px 25px 50px;
padding: 10px;
z-index: 4000;
user-select: none;
cursor: pointer !important;
font-size: 3.5vmax;
font-size: 25px;
}
p.blog-summary {
display: block;
position: relative;
padding: 5px;
margin: 25px 10px 45px 50px;
font-family: 'Aller', Arial, sans-serif;
color: white;
text-align: left;
text-shadow: 0 2px 2px rgba(0, 0, 0, .35);
z-index: 4000;
user-select: none;
cursor: pointer !important;
line-height: 1.4;
font-size: 18px;
margin-bottom: 10px;
span {
background-color: black;
box-shadow: 0.2em 0 0 rgba(black, 1), -0.2em 0 0 rgba(black, 1);
display: inline;
}
}
//svg {
// float: right;
// background-color: black;
//}
}
}
}
section.blog-post-section:nth-child(even) {
div.img-container{
right: 0px;
}
}
section.blog-post-section:nth-child(odd) {
div.title-card-flex {
right: 0px;
}
}
