dropddesigns/eqcss-troubleshooting.html

## eqcss-troubleshooting.html
<!doctype html>
<html lang="en-AU">
<head>
  <meta charset="utf-8" />
  <style>
    html {
      box-sizing: border-box;
    }

    *, *:before, *:after {
      box-sizing: inherit;
    }

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

    .grid {}

    @element '.grid' and (min-width: 600px) {
      $this .grid__column {
        border: #333 dotted 1px;
        float: left;
        width: 45%;
      }

      $this .grid__column--is-first {
        margin-right: 5%;
      }

      $this .grid__column--is-last {
        margin-left: 5%;
      }
    }

    .flag {}

    .flag__image > img {
      height: auto;
      max-width: 100%;
      width: 100%;
    }

    .flag__body p {
      margin-top: 0;
    }

    /* 370px - 23.125em */
    @element '.flag' and (min-width: 370px) {
      $this .flag__image {
        padding-right: 10px;
      }

      $this .flag__image,
      $this .flag__body {
        display: table-cell;
        vertical-align: top;
      }

      $this[class$="--bottom"] .flag__image,
      $this[class$="--bottom"] .flag__body {
        vertical-align: bottom;
      }

      $this[class$="--middle"] .flag__image,
      $this[class$="--middle"] .flag__body {
        vertical-align: middle;
      }

      $this[class$="--top"] .flag__image,
      $this[class$="--top"] .flag__body {
        vertical-align: top;
      }

      $this[class$="--rev"] .flag__image {
        padding-right: 0;
        padding-left: 10px;
      }

      $this .flag__image > img {
        display: inline;
        max-width: none;
        width: auto;
      }
    }

    /* 500px - 31.25em */
    @element '.flag' and (min-width: 500px) {
      $this {
        display: table;
      }
    }

    /* 800px - 50em */
    @element '.flag' and (min-width: 800px) {
      $this .flag__image > img {
        height: auto;
        width: 100%;
      }
    }

    /* 970px - 60.625em */
    @element '.flag' and (min-width: 970px) {
      $this .flag__image > img {
        height: 86px;
        width: 110px;
      }
    }

    clearfix:after {
      clear: both;
      content: "";
      display: table;
    }
  </style>
</head>
<body>
  <div class="flag">
    <div class="flag__image">
      <img alt="A black rectangle placeholder" height="180" src="https://placeholdit.imgix.net/~text?txtsize=23&bg=000000&txtclr=ffffff&w=230&h=180" width="230" />
    </div>
    <div class="flag__body">
      <p><strong>The flag object</strong></p>
      <p>The flag object shares a lot of common traits with the media object; its sole purpose is displaying image- and text-like content side-by-side. Where the flag object differs, however, is its ability to vertically align the image and text to the tops, middles or bottoms of each other.</p>
    </div>
  </div>

  <div class="grid clearfix">
    <div class="grid__column grid__column--is-first">
      <div class="flag">
        <div class="flag__image">
          <img alt="A red rectangle placeholder" height="180" src="https://placeholdit.imgix.net/~text?txtsize=23&bg=ff0000&txtclr=ffffff&w=230&h=180" width="230" />
        </div>
        <div class="flag__body">
          <p><strong>The flag object</strong></p>
          <p>The flag object shares a lot of common traits with the media object; its sole purpose is displaying image- and text-like content side-by-side. Where the flag object differs, however, is its ability to vertically align the image and text to the tops, middles or bottoms of each other.</p>
        </div>
      </div>
    </div>
    <div class="grid__column grid__column--is-last">
      <div class="flag">
        <div class="flag__image">
          <img alt="An pink rectangle placeholder" height="180" src="https://placeholdit.imgix.net/~text?txtsize=23&bg=ffaaee&txtclr=ffffff&w=230&h=180" width="230" />
        </div>
        <div class="flag__body">
          <p><strong>The flag object</strong></p>
          <p>The flag object shares a lot of common traits with the media object; its sole purpose is displaying image- and text-like content side-by-side. Where the flag object differs, however, is its ability to vertically align the image and text to the tops, middles or bottoms of each other.</p>
        </div>
      </div>
    </div>
  </div>

  <script src="http://elementqueries.com/EQCSS.js"></script>
  <script src="http://staticresource.com/eqcss-demo.js"></script>
</body>
</html>
	<!doctype html>
	<html lang="en-AU">
	<head>
	<meta charset="utf-8" />
	<style>
	html {
	box-sizing: border-box;
	}

	, :before, *:after {
	box-sizing: inherit;
	}

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

	.grid {}

	@element '.grid' and (min-width: 600px) {
	$this .grid__column {
	border: #333 dotted 1px;
	float: left;
	width: 45%;
	}

	$this .grid__column--is-first {
	margin-right: 5%;
	}

	$this .grid__column--is-last {
	margin-left: 5%;
	}
	}

	.flag {}

	.flag__image > img {
	height: auto;
	max-width: 100%;
	width: 100%;
	}

	.flag__body p {
	margin-top: 0;
	}

	/* 370px - 23.125em */
	@element '.flag' and (min-width: 370px) {
	$this .flag__image {
	padding-right: 10px;
	}

	$this .flag__image,
	$this .flag__body {
	display: table-cell;
	vertical-align: top;
	}

	$this[class$="--bottom"] .flag__image,
	$this[class$="--bottom"] .flag__body {
	vertical-align: bottom;
	}

	$this[class$="--middle"] .flag__image,
	$this[class$="--middle"] .flag__body {
	vertical-align: middle;
	}

	$this[class$="--top"] .flag__image,
	$this[class$="--top"] .flag__body {
	vertical-align: top;
	}

	$this[class$="--rev"] .flag__image {
	padding-right: 0;
	padding-left: 10px;
	}

	$this .flag__image > img {
	display: inline;
	max-width: none;
	width: auto;
	}
	}

	/* 500px - 31.25em */
	@element '.flag' and (min-width: 500px) {
	$this {
	display: table;
	}
	}

	/* 800px - 50em */
	@element '.flag' and (min-width: 800px) {
	$this .flag__image > img {
	height: auto;
	width: 100%;
	}
	}

	/* 970px - 60.625em */
	@element '.flag' and (min-width: 970px) {
	$this .flag__image > img {
	height: 86px;
	width: 110px;
	}
	}

	clearfix:after {
	clear: both;
	content: "";
	display: table;
	}
	</style>
	</head>
	<body>
	<div class="flag">
	<div class="flag__image">
	<img alt="A black rectangle placeholder" height="180" src="https://placeholdit.imgix.net/~text?txtsize=23&bg=000000&txtclr=ffffff&w=230&h=180" width="230" />
	</div>
	<div class="flag__body">
	<p><strong>The flag object</strong></p>
	<p>The flag object shares a lot of common traits with the media object; its sole purpose is displaying image- and text-like content side-by-side. Where the flag object differs, however, is its ability to vertically align the image and text to the tops, middles or bottoms of each other.</p>
	</div>
	</div>

	<div class="grid clearfix">
	<div class="grid__column grid__column--is-first">
	<div class="flag">
	<div class="flag__image">
	<img alt="A red rectangle placeholder" height="180" src="https://placeholdit.imgix.net/~text?txtsize=23&bg=ff0000&txtclr=ffffff&w=230&h=180" width="230" />
	</div>
	<div class="flag__body">
	<p><strong>The flag object</strong></p>
	<p>The flag object shares a lot of common traits with the media object; its sole purpose is displaying image- and text-like content side-by-side. Where the flag object differs, however, is its ability to vertically align the image and text to the tops, middles or bottoms of each other.</p>
	</div>
	</div>
	</div>
	<div class="grid__column grid__column--is-last">
	<div class="flag">
	<div class="flag__image">
	<img alt="An pink rectangle placeholder" height="180" src="https://placeholdit.imgix.net/~text?txtsize=23&bg=ffaaee&txtclr=ffffff&w=230&h=180" width="230" />
	</div>
	<div class="flag__body">
	<p><strong>The flag object</strong></p>
	<p>The flag object shares a lot of common traits with the media object; its sole purpose is displaying image- and text-like content side-by-side. Where the flag object differs, however, is its ability to vertically align the image and text to the tops, middles or bottoms of each other.</p>
	</div>
	</div>
	</div>
	</div>

	<script src="http://elementqueries.com/EQCSS.js"></script>
	<script src="http://staticresource.com/eqcss-demo.js"></script>
	</body>
	</html>