How can I achieve this CSS in a fluid layout? - css

Question

I've built a UI of a loop of cards however I'm struggling to make the UI work for a fluid screen layout. Can anyone suggest how I could arrange a series of divs into an outer container that can vary in heights and widths? To make things a little easier the container will always follow a portrait dimension.
I've also added a jsFiddle link to allow you to try editing the html / css.
http://jsfiddle.net/w2we2gyd/
<div class="card-preview">
<p>1</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>

Answer 1

First off: I'm not a fan of how your CSS is laid out, try to use a preprocessor to structure your code and then just output it regularly. Apart from that, adding the following lines does, make it responsive:
.card-preview p {
left: 50%;
top: 50%;
right: auto;
bottom: auto;
width: auto;
height: auto;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.loop-container{
height:100%;
}
.loop-status, .card-preview {
height: 29%;
}
/* Loop container could be variable widths / height */
body, html {
height: 100%;
}
.loop-container
{
width:100%;
height:100%;
}
.loop-status, .card-preview {
position: relative;
top: 0;
left: 0;
float: left;
margin: 10px 5px 5px 5px;
width: 29%;
height: 29%;
background: #fff; }
.loop-status .circle, .card-preview .circle {
border-radius: 50%;
width: 75%;
height: 45%;
z-index: 2;
position: absolute;
top: 25%;
background-color: white;
left: 0;
border: solid 4px #00b9aa;
right: 0;
margin-left: auto;
margin-right: auto;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto; }
.loop-status .circle i, .card-preview .circle i {
display: none; }
.loop-status .circle.loop-correct, .card-preview .circle.loop-correct {
background-color: #00b9aa; }
.loop-status .circle.loop-correct i, .card-preview .circle.loop-correct i {
display: inline;
margin: auto;
text-align: center;
vertical-align: middle;
width: 100%;
height: 100%;
display: block;
color: white;
font-size: 50px;
padding: 10px; }
.loop-status .circle.loop-incorrect, .card-preview .circle.loop-incorrect {
background-color: #A23842; }
.loop-status .circle.loop-incorrect i, .card-preview .circle.loop-incorrect i {
display: inline;
margin: auto;
text-align: center;
vertical-align: middle;
width: 100%;
height: 100%;
display: block;
color: white;
font-size: 50px;
padding: 10px; }
.card-preview {
cursor: pointer;
border: solid 4px #00b9aa;
border-radius: 10px;
overflow: hidden;
-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease; }
.card-preview:hover {
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.9);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.9);
-webkit-transform: scale(1.05, 1.05);
-moz-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05); }
.card-preview p {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
color: #00534c;
font: 25px/105px sans serif;
display: inline-block;
z-index: 3;
line-height: 6.5em; }
.card-preview.current .card-preview-top {
-webkit-animation: pulsate 2s infinite;
-moz-animation: pulsate 2s infinite;
-o-animation: pulsate 2s infinite;
-ms-animation: pulsate 2s infinite;
animation: pulsate 2s infinite; }
.card-preview.answered .card-preview-top {
background-color: white; }
.card-preview.hinted .card-preview-top {
-webkit-animation: pulsateError 2s infinite;
-moz-animation: pulsateError 2s infinite;
-o-animation: pulsateError 2s infinite;
-ms-animation: pulsateError 2s infinite;
animation: pulsateError 2s infinite; }
.card-preview .card-preview-top {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 50%;
background-color: #727272;
z-index: 1; }
.card-preview .card-preview-bottom {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 50%;
background-color: #00b9aa;
z-index: 1; }
/* Added code below */
.card-preview p {
left: 50%;
top: 50%;
right: auto;
bottom: auto;
width: auto;
height: auto;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.loop-container{
height:100%;
}
.loop-status, .card-preview {
height: 29%;
}
<div class='loop-container'>
<div class="card-preview">
<p>1</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>
<div class="card-preview">
<p>2</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>
<div class="card-preview">
<p>3</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>
<div class="card-preview">
<p>4</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>
<!-- Cards should appear in a loop with an empty middle -->
<div class="loop-status" class='overview'>
</div>
<div class="card-preview">
<p>5</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>
<div class="card-preview">
<p>6</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>
<div class="card-preview">
<p>7</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>
<div class="card-preview">
<p>8</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>
</div>
The only issue is that you want a margin in pixels, well, you can solve this in the following way:
.loop-status, .card-preview {
/* non-calc supporting fallback */
height: 29%;
/* calc supporting browsers will do this right */
height: calc(100% / 3 - 15px);
width: 29%;
width: calc(100% / 3 - 10px);
margin: 2%;
margin: calc(10px) calc(5px) calc(5px) calc(5px);
}