I am currently working on a website that includes a modified version of a JavaScript countdown element. While I have been learning a lot about flex grids, I haven't delved much into block/inline-block layouts.
One issue I'm facing is that when the countdown reaches around 945px, the four inline-block boxes remain in four columns and end up overflowing to the edge of the screen: https://i.sstatic.net/EV2Ls.png
My goal is for the four columns to collapse into two side-by-side at around 945px, with the text still aligned properly under each box. I managed to accidentally achieve this by tinkering with the code in Chrome's "inspect" tool, but the four lines of text ended up below the boxes rather than in their correct positions. Here is an example of my desired outcome:
https://i.sstatic.net/e73iF.jpg
Here is the relevant code snippet:
https://codepen.io/Lancewalker/pen/QxpbZx
$(function (){
function countdown() {
var now = new Date();
var eventDate = new Date(2019, 0, 1);
var currentTime = now.getTime();
var evenTime = eventDate.getTime();
var remTime = evenTime - currentTime;
var sec = Math.floor(remTime / 1000);
var min = Math.floor(sec / 60);
var hur = Math.floor(min / 60);
var day = Math.floor(hur / 24);
hur %= 24;
min %= 60;
sec %= 60;
hur = (hur < 10) ? "0" + hur : hur;
min = (min < 10) ? "0" + min : min;
sec = (sec < 10) ? "0" + sec : sec;
$('.seconds').text(sec);
$('.minutes').text(min);
$('.hours').text(hur);
$('.days').text(day);
setTimeout(countdown, 1000);
}
countdown();
}); body {
background-color: #333;
}
.container {
width: 800px;
height: 350px;
margin: auto;
text-align: center
}
.container h2 {
color: #fff;
font-size: 30px;
font-family: Exo, Arial, Sans-serif;
padding: 50px 0 20px;
font-weight: normal
}
.container .content {
width: 100%;
}
.container .content > div {
display: inline-block;
margin: 35px 10px 0;
width: 120px;
height: 130px;
background: rgb(146, 163, 191, .6);
border-radius: 8px;
border: 1px solid #fff;
color: #fff;
line-height: 138px;
font-family: Exo, arial, sans-serif;
font-size: 55px;
}
.container .title {
width: ;
height: 50px;
position: relative
}
.container .title span {
display: inline-block;
width: 140px;
font-size: 20px;
font-family: 'Exo', arial, sans-serif;
color: #fff;
line-height: 50px;
}<div class="container">
<h2>Apartments Coming Soon!</h2>
<div class="content">
<div class="days">85</div>
<div class="hours">22</div>
<div class="minutes">33</div>
<div class="seconds">54</div>
</div>
<div class="title">
<span>Days</span>
<span>Hours</span>
<span>Minutes</span>
<span>Seconds</span>
</div>
</div>