Stop div from moving horizontally on browser resize

Stop div from moving horizontally on browser resize - javascript

I am trying to create a layout having multiple divs, all of same width and height. The width of all divs is 100vw. The problem is that when I resize the browser window, if initially div no 5 was in center, it moves and some other div lands up in the center.
I tried using onresize event and changing scrollLeft for the container element as
container_scrollLeft = current_div_index * width_of_one_div but this leads to jittery behaviour due to constant manipulation of scrollLeft.
.container {
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-item-align: start;
outline: none;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
overflow-x: scroll;
overflow-y: hidden;
overflow-y: -moz-hidden-unscrollable;
width: 100%;
}
.page {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
min-width: 100%;
position: relative;
width: 100vw;
box-shadow: inset 0 0 20px #000000;
}
<div class="container" style="height: 400px;">
<div class="page">
<h1>1</h1>
</div>
<div class="page">
<h1>2</h1>
</div>
<div class="page">
<h1>3</h1>
</div>
<div class="page">
<h1>4</h1>
</div>
<div class="page">
<h1>5</h1>
</div>
<div class="page">
<h1>6</h1>
</div>
<div class="page">
<h1>7</h1>
</div>
<div class="page">
<h1>8</h1>
</div>
<div class="page">
<h1>9</h1>
</div>
<div class="page">
<h1>10</h1>
</div>
</div>
I am preferably looking for a pure CSS solution. However, I welcome javascript based solution too.

Related

Align text in the center by ignoring the absolutely positioned element

I am developing a flex table from scratch and the table supports filtering and sorting. The icons for filters and sorting are displayed in the table header (right corner). Also my table supports that the user can position the header text left/center;
My problem:
Since the icons are inside the table header, icons as well occupies some space. So when i position the elements in the center, i see the alignment gets disturbed as shown below.
body {
width: 100%;
}
.table-header, .table-body {
display: flex;
width: fit-content;
border: 1px solid black;
padding: 10px;
}
.header, .data {
display: flex;
min-width: 150px;
width: 150px;
border-right: 1px solid black;
display: flex;
justify-content: center;
position: relative;
}
.header .text {
width: 100%;
white-space: nowrap;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
}
.icons {
float: right;
right: 0;
display: flex;
}
<div class="table">
<div class="table-header">
<div class="header">
<div class="text">Hlkjklkjlkjlkj lkjlkjlkjlkjlkjljlkjlkj</div>
<div class="icons">
<span> &#9760</span>
<span> &#9760</span>
</div>
</div>
<div class="header">9747
<div class="text">Header 2</div>
<div class="icons">
<span>b</span>
<span>b</span>
</div>
</div>
<div class="header">
<div class="text">Header 3</div>
<div class="icons">
<span>a</span>
<span>b</span>
</div>
</div>
<div class="header">
<div class="text">Header 4</div>
<div class="icons">
<span>a</span>
<span>b</span>
</div>
</div>
</div>
<div class="table-body">
<div class="data">123</div>
<div class="data">123</div>
<div class="data">123</div>
<div class="data">123</div>
</div>
<div class="table-body">
<div class="data">123</div>
<div class="data">123</div>
<div class="data">123</div>
<div class="data">123</div>
</div><div class="table-body">
<div class="data">123</div>
<div class="data">123</div>
<div class="data">123</div>
<div class="data">123</div>
</div>
</div>
Code: Here
What i tried
So since the icons as well take some space, to avoid this i positioned them absolutely relative to the header. So the alignment problem got solved . But for long headers where ellipsis has to be shown, the ellipsis hides behind the icons as shown below
Code: Here
So what is the solution to this ? I want to maintain the center position by reducing the space occupied by the icons. Is it possible through CSS? Please help. Thanks :)

If you try to do that with absolute positioning you need to know what exact width your icons can take.
Then possible solution is to add padding rule (left/right) into table headers, so CSS code should be like this:
body {
width: 100%;
}
.table-header, .table-body {
display: flex;
width: fit-content;
border: 1px solid black;
padding: 10px;
}
.header, .data {
box-sizing: border-box;
padding: 0 30px;
display: flex;
min-width: 150px;
width: 150px;
border-right: 1px solid black;
display: flex;
justify-content: center;
position: relative;
}
.header .text {
width: 100%;
white-space: nowrap;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
}
.icons {
position: absolute;
right: 0;
}

How can I create a simple 3x3 grid inside an article that keeps aspect ratio?

I want to make a 3x3 grid of squares in CSS/HTML that doesn't pass the height of the page and is responsive.
I've tried changing the width and height of the article to make it smaller percentage wise but it makes it too small when on mobile and too big when on desktop.
.square-container {
display: flex;
flex-wrap: wrap;
}
.square {
position: relative;
flex-basis: calc(33.333% - 10px);
margin: 5px;
border: 1px solid;
box-sizing: border-box;
background: tomato;
font-size: 9vw;
}
.square::before {
content: '';
display: block;
padding-top: 100%;
}
.square .content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.article1 {
border-style: solid;
border-width: 5px;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.h1 {
font-size: 3vw;
text-align: center;
}
<article class="article1">
<div>
<h1 class="h1">Text 1</h1>
</div>
<div class="square-container">
<div class="square">
<div class="content">0</div>
</div>
<div class="square">
<div class="content">1</div>
</div>
<div class="square">
<div class="content">2</div>
</div>
<div class="square">
<div class="content">3</div>
</div>
<div class="square">
<div class="content">4</div>
</div>
<div class="square">
<div class="content">5</div>
</div>
<div class="square">
<div class="content">6</div>
</div>
<div class="square">
<div class="content">7</div>
</div>
<div class="square">
<div class="content">8</div>
</div>
</div>
<div>
<h1 class="h1">Text 2</h1>
</div>
</article>
I want it to resize so that it's width and height are responsive and the height never exceeds the display (never have to scroll).

How to hide a flexbox element with smoth effect

I need to center divs and hide them on each click, the problem is when I use hide() and flexbox it makes a rude effect after dissapear, but if you just simply float elements to left it makes fine, how can I achieve this?
I need to apply exactly the same disappearing effect that is in the
first example to the second one (with flexbox).
Here is the example:
$(".example1, .example2").click(function(){
$(this).hide("slow")
});
.main{
border: 2px solid black;
height: 100%;
width: 100%;
}
.example1{
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
float: left;
}
.example2{
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
float: left;
text-align: center;
margin-left: 8px;
}
.second{
border: 2px solid black;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
With simple float left it hides slowly fine:
<div class="first">
<div class="example1">1</div>
<div class="example1">2</div>
<div class="example1">3</div>
<div class="example1">4</div>
<div class="example1">5</div>
<div class="example1">6</div>
<div class="example1">7</div>
<div class="example1">8</div>
<div class="example1">9</div>
<div class="example1">10</div>
<div class="example1">11</div>
<div class="example1">12</div>
<div class="example1">12</div>
<div class="example1">13</div>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
Now flex center, when you hide it makes rude effect, it isnt like div.example1:
<div class="second">
<div class="example2">1</div>
<div class="example2">2</div>
<div class="example2">3</div>
<div class="example2">4</div>
<div class="example2">5</div>
<div class="example2">6</div>
<div class="example2">7</div>
<div class="example2">8</div>
<div class="example2">9</div>
<div class="example2">10</div>
<div class="example2">11</div>
<div class="example2">12</div>
<div class="example2">13</div>
<div class="example2">14</div>
</div>
</div>

Use flex-start for justify content instead of center. Now it has the same effect as with float. You can also use fadeOut instead of hide to achieve effect you want.
$(".example1, .example2").click(function(){
$(this).fadeOut("slow")
});
.main{
border: 2px solid black;
height: 100%;
width: 100%;
}
.example1{
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
float: left;
}
.example2{
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
display: flex;
justify-content: flex-start;
text-align: center;
margin-left: 8px;
}
.second{
border: 2px solid black;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
With simple float left it hides slowly fine:
<div class="first">
<div class="example1">1</div>
<div class="example1">2</div>
<div class="example1">3</div>
<div class="example1">4</div>
<div class="example1">5</div>
<div class="example1">6</div>
<div class="example1">7</div>
<div class="example1">8</div>
<div class="example1">9</div>
<div class="example1">10</div>
<div class="example1">11</div>
<div class="example1">12</div>
<div class="example1">12</div>
<div class="example1">13</div>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
Now flex center, when you hide it makes rude effect, it isnt like div.example1:
<div class="second">
<div class="example2">1</div>
<div class="example2">2</div>
<div class="example2">3</div>
<div class="example2">4</div>
<div class="example2">5</div>
<div class="example2">6</div>
<div class="example2">7</div>
<div class="example2">8</div>
<div class="example2">9</div>
<div class="example2">10</div>
<div class="example2">11</div>
<div class="example2">12</div>
<div class="example2">13</div>
<div class="example2">14</div>
</div>
</div>

First, you can notice that this issue doesn't happen when you try to remove an item from the last row (excluding the first one in the last row). The issue appears when the first element of the row n suddenly go to the row n-1 because of 2 things :
You are trying to remove this first element so its width is going to 0 then for sure he will be able to fit into the previous row.
You are trying to remove any element so its width is going to 0 and you are creating enough space for the first element of next row to jump on it.
And this is simply due to center alignment as there is no difference if you do it with float, inline-block or flex. What is happening is that during the transition all the elements are moving to the center and when the new element comes (the first one of the next row) all the elements are re-placed again to keep the center alignement and then you have the rude effect !
With left alignment all the elements will move to the left during the transition and they won't move again at the end of transition (when the new element comes) so we don't have any rude effect.
Here is a snippet that shows inline-block and flex working fine with left alignment :
$(".example2, .example1").click(function() {
$(this).hide("slow");
});
.main {
border: 2px solid black;
height: 100%;
width: 100%;
}
.example1 {
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
text-align: center;
display:inline-block;
margin: 8px;
transition:margin 0.6s;
}
.example2 {
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
text-align: center;
float:left;
display:inline-block;
margin: 8px;
transition:margin 0.6s;
}
.first {
border: 2px solid black;
display: flex;
flex-wrap: wrap;
}
.second {
border: 2px solid black;
display: flex;
flex-wrap: wrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
inline-block
<div class="first">
<div class="example1">1</div>
<div class="example1">2</div>
<div class="example1">3</div>
<div class="example1">4</div>
<div class="example1">5</div>
<div class="example1">6</div>
<div class="example1">7</div>
<div class="example1">8</div>
<div class="example1">9</div>
<div class="example1">10</div>
<div class="example1">11</div>
<div class="example1">12</div>
<div class="example1">13</div>
<div class="example1">14</div>
<div class="example1">15</div>
<div class="example1">16</div>
<div class="example1">17</div>
<div class="example1">18</div>
<div class="example1">19</div>
</div>
flex solution
<div class="second">
<div class="example2">1</div>
<div class="example2">2</div>
<div class="example2">3</div>
<div class="example2">4</div>
<div class="example2">5</div>
<div class="example2">6</div>
<div class="example2">7</div>
<div class="example2">8</div>
<div class="example2">9</div>
<div class="example2">10</div>
<div class="example2">11</div>
<div class="example2">12</div>
<div class="example2">13</div>
<div class="example2">14</div>
<div class="example2">15</div>
<div class="example2">16</div>
<div class="example2">17</div>
<div class="example2">18</div>
<div class="example2">19</div>
</div>
</div>
Unfortunately, I don't have a solution to this if you want to only use the hide() of jQuery. Maybe some ideas of solution is to make a more complex code that will avoid the centered elements to move in two directions (you may for example change margin property at the same time to cancel the movement) or you can keep the left alignment and find some trick to simulate the centering (dynamically add some margin when window resize for example).
Hope this will help you to investigate more (even if I didn't really give a solution).

Well as pointed out already it would require some kind of "physics engine" moving the other blocks up smoothly etc.
But I made an attempt anyway which looks a bit more smooth at least.
$(".example1, .example2").click(function(){
var time = 600;
var $parent = $(this).parent();
$parent.animate({'width': '90%'}, time/2, function() {
$parent.animate({'width': '100%'}, time/2);
});
$(this).hide(time);
});
.main{
border: 2px solid black;
height: 100%;
width: 100%;
}
.example1{
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
float: left;
}
.example2{
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
float: left;
text-align: center;
margin-left: 8px;
}
.second{
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: center;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="second">
<div class="example2">1</div>
<div class="example2">2</div>
<div class="example2">3</div>
<div class="example2">4</div>
<div class="example2">5</div>
<div class="example2">6</div>
<div class="example2">7</div>
<div class="example2">8</div>
<div class="example2">9</div>
<div class="example2">10</div>
<div class="example2">11</div>
<div class="example2">12</div>
<div class="example2">13</div>
<div class="example2">14</div>
</div>
</div>

You can achieve the above without flex by making the children div's as inline-block with the parent being set with text-align:center, please take a look at this.
$(".example1, .example2").click(function(){
$(this).fadeOut("slow");
});
.main{
border: 2px dotted black;
height: 100%;
width: 100%;
}
.example1{
display: inline-block;
background-color: steelblue;
color: #FFF;
cursor: pointer;
margin: 10px;
padding: 15px 20px;
}
.first{
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div class="main">
<div class="first">
<div class="example1">1</div>
<div class="example1">2</div>
<div class="example1">3</div>
<div class="example1">4</div>
<div class="example1">5</div>
<div class="example1">6</div>
<div class="example1">7</div>
<div class="example1">8</div>
<div class="example1">9</div>
<div class="example1">10</div>
<div class="example1">11</div>
<div class="example1">12</div>
<div class="example1">12</div>
<div class="example1">13</div>
</div>
</div>

My idea is: fade the whole parent container during reordering.
The effect will not so rude.
$(".second div").click(function() {
$(this).hide("slow");
var p = $(this).parent();
p.addClass("hidden");
setTimeout(function() {
p.removeClass("hidden")
}, 300);
});
p {
clear: both;
}
.second {
display: flex;
flex-wrap: wrap;
justify-content: center;
border: 2px solid black;
transition: 200ms;
}
.second div {
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
}
.hidden {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="second">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
</div>

Instead of justify-content: center I changed it to justify-content: space-evenly (in your case, looks somewhat similar to center only) also updated the function from simply hiding to .animate and then .hide. Will it do?
$(".example1, .example2").click(function(){
var _this = this;
$(_this).animate({width: "0"}, 500, function(){ $(_this).hide(500) })
});
.main{
border: 2px solid black;
height: 100%;
width: 100%;
}
.example1{
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
float: left;
}
.example2{
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
float: left;
text-align: center;
margin-left: 8px;
overflow: hidden;
}
.second{
border: 2px solid black;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: space-evenly;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
With simple float left it hides slowly fine:
<div class="first">
<div class="example1">1</div>
<div class="example1">2</div>
<div class="example1">3</div>
<div class="example1">4</div>
<div class="example1">5</div>
<div class="example1">6</div>
<div class="example1">7</div>
<div class="example1">8</div>
<div class="example1">9</div>
<div class="example1">10</div>
<div class="example1">11</div>
<div class="example1">12</div>
<div class="example1">12</div>
<div class="example1">13</div>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
Now flex center, when you hide it makes rude effect, it isnt like div.example1:
<div class="second">
<div class="example2">1</div>
<div class="example2">2</div>
<div class="example2">3</div>
<div class="example2">4</div>
<div class="example2">5</div>
<div class="example2">6</div>
<div class="example2">7</div>
<div class="example2">8</div>
<div class="example2">9</div>
<div class="example2">10</div>
<div class="example2">11</div>
<div class="example2">12</div>
<div class="example2">13</div>
<div class="example2">14</div>
</div>
</div>

2 column web to 1 column mobile with dynamic height boxes

How can I css this diagram while supporting IE11 and all major browsers?
Flexbox doesn't seem to support dynamic height.
Do I have to have left/right columns for lg viewport and no columns for xs viewport?
Codepen
<div class="container">
<div id="box1" class="box">box1</div>`
<div id="box2" class="box">box2</div>`
<div id="box3" class="box">box3</div>`
<div id="box4" class="box">box4</div>`
<div id="box5" class="box">box5</div>`
</div>

As mentioned in my comment, you can render both and show only one layout based on the current screen size using media queries.
Sample Hack Implementation:
<html>
<head>
<style>
.container {
width: 100%;
}
.row {
display: flex;
flex-direction: row;
justify-content: flex-start;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.item {
width: 100%;
border: solid 1px #dadada;
border-radius: 16px;
display: flex;
justify-content: center;
align-items: center;
}
#media screen and (max-width: 600px) {
.desktop-only{
display: none;
}
.column{
width: 100%;
}
}
#media screen and (min-width: 601px) {
.mobile-only{
display: none;
}
.column{
width: 50%;
}
}
.item-1 {
height: 200px;
}
.item-2 {
height: 400px;
}
.item-3 {
height: 250px;
}
.item-4 {
height: 300px;
}
.item-5 {
height: 350px;
}
</style>
</head>
<body>
<div class="desktop-only">
<div class="container">
<div class="row">
<div class="item item-1">1</div>
</div>
<div class="row">
<div class="column">
<div class="item item-3">3</div>
<div class="item item-5">5</div>
</div>
<div class="column">
<div class="item item-2">2</div>
<div class="item item-4">4</div>
</div>
</div>
</div>
</div>
<div class="mobile-only">
<div class="container">
<div class="column">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
</div>
</div>
</div>
</body>
</html>
Breakpoint is set to 600px. Change window width above and below 600px to see the layout "change"

Vertically and horizontally center a heading underneath an image

I have created the following jsfiddle on a website that I'm building.
The first heading has 3 lines, whilst the other 2 just have one line. I have added a min-height to my boxes so they are all equal.
I would now like to center the heading on the vertical and horizontal axis.
I have tried to achieve this with flexbox, but it's only aligning horizontally. What am I doing wrong here?
.container {
width: 600px;
max-width: 90%;
margin: 0 auto;
}
.third {
float: left;
width: 32%;
min-height: 227px;
margin: 0 2% 2% 0;
background: #fff;
}
.last {
margin: 0 0 2% 0;
}
header {
padding: 12px;
}
h2 {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
img {
display: block;
height: auto;
max-width: 100%;
}
<div class="container">
<section class="third">
<img src="http://bit.ly/1OTNPkt" alt="Kitten">
<header>
<h2>Title one which is slightly longer goes here</h2>
</header>
</section>
<section class="third">
<img src="http://bit.ly/1OTNPkt" alt="Kitten">
<header>
<h2>Title two</h2>
</header>
</section>
<section class="third last">
<img src="http://bit.ly/1OTNPkt" alt="Kitten">
<header>
<h2>Title three</h2>
</header>
</section>
</div>
Update:
I'm looking for a solution that supports IE including 9.

I suggest to use nested flexbox, drop the float and min-height on the section. The flex layout is smart enough to get equal height automatically. For IE9 support, see the bottom part.
.container {
width: 600px;
max-width: 90%;
margin: 0 auto;
display: flex;
}
.third {
/* float: left; */
width: 32%;
/* min-height: 227px; */
margin: 0 2% 2% 0;
background: gold;
display: flex;
flex-direction: column;
}
.last {
margin: 0 0 2% 0;
}
header {
padding: 12px;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
h2 {
margin: 0;
}
img {
display: block;
height: auto;
max-width: 100%;
}
<div class="container">
<section class="third">
<img src="http://bit.ly/1OTNPkt" alt="Kitten">
<header>
<h2>Title one which is slightly longer goes here</h2>
</header>
</section>
<section class="third">
<img src="http://bit.ly/1OTNPkt" alt="Kitten">
<header>
<h2>Title two</h2>
</header>
</section>
<section class="third last">
<img src="http://bit.ly/1OTNPkt" alt="Kitten">
<header>
<h2>Title three</h2>
</header>
</section>
</div>
Edit: IE9 support. I would use some Javascript to do the equal height stuff, the following example using jQuery + CSS table cell to do the vertical center.
$(document).ready(function() {
var maxHeight = 0;
$("h2").each(function() {
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
});
$("h2").height(maxHeight);
});
.container {
width: 600px;
max-width: 90%;
margin: 0 auto;
}
.third {
float: left;
width: 32%;
/* min-height: 227px; */
margin: 0 2% 2% 0;
background: gold;
}
.last {
margin: 0 0 2% 0;
}
header {
padding: 12px;
}
h2 {
margin: 0;
display: table-cell;
vertical-align: middle;
}
img {
display: block;
height: auto;
max-width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<section class="third">
<img src="http://bit.ly/1OTNPkt" alt="Kitten">
<header>
<h2>Title one which is slightly longer goes here</h2>
</header>
</section>
<section class="third">
<img src="http://bit.ly/1OTNPkt" alt="Kitten">
<header>
<h2>Title two</h2>
</header>
</section>
<section class="third last">
<img src="http://bit.ly/1OTNPkt" alt="Kitten">
<header>
<h2>Title three</h2>
</header>
</section>
</div>

Tried using display: table and it sort of works but it turns out that you can't use percentages for border-spacing
Demo: https://jsfiddle.net/2dkycc1L/

I made the whole grid using flexbox to make them all equal height and removed the min-height. The header element is also flexing to make the title vertically align in the middle: https://jsfiddle.net/5yq37fha/.

We Keep Coding

JavaScript is the programming language of the Web.

Stop div from moving horizontally on browser resize - javascript

Related

Align text in the center by ignoring the absolutely positioned element

How can I create a simple 3x3 grid inside an article that keeps aspect ratio?

How to hide a flexbox element with smoth effect

2 column web to 1 column mobile with dynamic height boxes

Vertically and horizontally center a heading underneath an image

Categories

Resources