Faking Media Query with calc();

faking-media-query-with-calc.markdown

Faking Media Query with calc();

From this: https://medium.freecodecamp.com/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848#.qn28y65bx

A Pen by Chris Coyier on CodePen.

License.

index.html

<div class="parent">
  <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem repellendus dolorum pariatur, possimus asperiores aut omnis illum provident ad porro?</div>
  <div class="block">Fugit magnam laborum accusantium, earum cupiditate consectetur perferendis iusto nobis quis! Hic quo asperiores, quae praesentium. Officia fugiat nulla corporis!</div>
  <div class="block">Sint voluptas possimus blanditiis voluptatum labore, ipsum quos libero neque laborum esse, molestiae inventore cum debitis veritatis omnis laudantium perspiciatis.</div>
  <div class="block">Laboriosam suscipit doloremque velit atque. Alias asperiores et consequuntur consectetur, placeat aut? Reprehenderit ipsum est earum illum illo quidem repellendus.</div>
</div>

style.scss

.block {
  padding: 20px;
  float: left;
  min-width: 50%;
  max-width: 100%;
  width: calc((480px - 100%) * 480);
}

* {
  box-sizing: border-box;
}