CODEWITHSUNDEEP
htmlcss
Marais Rossouw
Marais Rossouw

Reputation: 957

100vh, 50% and responsiveness

I have these stacked div's that are height: 100vh; (polyfills are present). Then inside of that div, I have 8 div's that are are suppose to be a perfect square, i use the width: 0; and padding-left: 25%; trick for that. but I would like to know how can I get the 2 rows to always fit inside the height: 100vh; div and scale down maintaining that 1:1 ratio.

I have supplied a JSFiddle to get started.

Upvotes: 3

Views: 1417

Answers (1)

pschueller
pschueller

Reputation: 4427

I'm not totally sure if this is what you are looking for, but you could set both height and width of .entropy to 25% of viewport height. That way they will always be squared.

You then might want to clear floats every 5th square.

.wrap {
    height: 100vh;
    zoom: 1;
}

.wrap:after {
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

.entropy {
    float: left;
    width: 25vh;
    height: 25vh;
    border: 1px solid red;
}

.entropy:nth-of-type(5n) {
    clear: left;
}

.entropy:before {
    display: inline-block;
    vertical-align: middle;
    content: '';
    height: 100%; 
}

.entropy p {
    display: inline-block;
    vertical-align: middle;
}
<div class="wrap">
    <div class="entropy">
        <p>
            Hello
        </p>
    </div>
    <div class="entropy">
        <p>
            Hello
        </p>
    </div>
    <div class="entropy">
        <p>
            Hello
        </p>
    </div>
    <div class="entropy">
        <p>
            Hello
        </p>
    </div>
    <div class="entropy">
        <p>
            Hello
        </p>
    </div>
    <div class="entropy">
        <p>
            Hello
        </p>
    </div>
    <div class="entropy">
        <p>
            Hello
        </p>
    </div>
    <div class="entropy">
        <p>
            Hello
        </p>
    </div>
</div>

Edit: An alternative is to do something like this:

.entropy {
    position: relative;
    width: 25%;
    overflow: hidden;
    float: left;
}
.entropy:before {
    content: "";
    display: block;
    padding-top: 25vw;
}

This way centering everything is easier, but you may have to change your HTML a little.

Here an example based on viewport width: jsfiddle.

And here an example based on viewport height: jsfiddle.

Upvotes: 2

Related Questions