Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Multiple columns dependent on media queries that test for height as well as width.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Media Query Multiple Columns</title>
<meta name="viewport" content="width=device-width, intial-scale=1">
<style>
@media all and (min-width: 40em) and (min-height: 36em) {
[role="main"] {
-webkit-column-count: 2;
-webkit-column-gap: 2em;
-moz-column-count: 2;
-moz-column-gap: 2em;
-o-column-count: 2;
-o-column-gap: 2em;
column-count: 2;
column-gap: 2em;
}
}
@media all and (min-width: 65em) and (min-height: 25em) {
[role="main"] {
-webkit-column-count: 3;
-webkit-column-gap: 2em;
-moz-column-count: 3;
-moz-column-gap: 2em;
-o-column-count: 3;
-o-column-gap: 2em;
column-count: 3;
column-gap: 2em;
}
}
</style>
</head>
<body>
<div role="main">
<p>It has been said that astronomy is a humbling and character-building experience. There is perhaps no better demonstration of the folly of human conceits than this distant image of our tiny world. To me, it underscores our responsibility to deal more kindly with one another, and to preserve and cherish the pale blue dot, the only home we've ever known.</p>
<p>The size and age of the Cosmos are beyond ordinary human understanding. Lost somewhere between immensity and eternity is our tiny planetary home. In a cosmic perspective, most human concerns seem insignificant, even petty. And yet our species is young and curious and brave and shows much promise. In the last few millennia we have made the most astonishing and unexpected discoveries about the Cosmos and our place within it, explorations that are exhilarating to consider. They remind us that humans have evolved to wonder, that understanding is a joy, that knowledge is prerequisite to survival. I believe our future depends powerfully on how well we understand this Cosmos in which we float like a mote of dust in the morning sky.</p>
<p>Our posturings, our imagined self-importance, the delusion that we have some privileged position in the Universe, are challenged by this point of pale light. Our planet is a lonely speck in the great enveloping cosmic dark. In our obscurity, in all this vastness, there is no hint that help will come from elsewhere to save us from ourselves.</p>
<p>A good rule for rocket experimenters to follow is this: always assume that it will explode.</p>
<p>The vehicle explodes, literally explodes, off the pad. The simulator shakes you a little bit, but the actual liftoff shakes your entire body and soul.</p>
<p>The view of the Earth from the Moon fascinated me—a small disk, 240,000 miles away. It was hard to think that that little thing held so many problems, so many frustrations. Raging nationalistic interests, famines, wars, pestilence don't show from that distance.</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.