css - vw vh responsive measure

by flatiron_school

HTML

<section class="yellow-bg">
    <span>hello scroll down to next section.</span>
</section>
<section class="blue-bg">
    <span>Lorem ipsum dolor.</span>
</section>

CSS

html, body {
    margin: 0;
    padding: 0;
}

.yellow-bg {
    background: yellow;
}

.blue-bg {
    background: aqua;
}

section {
    width: calc(100vw);
    height: calc(100vh);
    text-align: center;
}


section span {
    font-size: 1em;
    position: relative;
    top: calc(50vh - 0.5em);
}