Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added comments between items in the HTML

* font-size:0; solution does not work on Android 4 and on old chrome versions

Signed-off-by: Jérôme Coupé <jercoupe@gmail.com>
  • Loading branch information...
commit 79e753c974e5a71cd384a375dfd01310c98917ab 1 parent 7e007b8
@jeromecoupe authored
Showing with 25 additions and 25 deletions.
  1. +1 −1  README.md
  2. +1 −1  css/screen.css
  3. +23 −23 index.html
View
2  README.md
@@ -4,6 +4,6 @@ The aim of this test is to have a grid of items using media queries to change th
* Uses display:inline-block; and media queries
* Reflows depending on the available width (4 items per row > 3 items per row > 2 items per row)
* Plays nice with items of various lengths
-* Alleviates [the whitespace bug between items](http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/)
+* Alleviates [the whitespace bug between items](http://css-tricks.com/fighting-the-space-between-inline-block-elements/). If you really want to be on the safe side here, use HTML comments to eliminate whitespace or block your begin and end tags together.
* Tested in all modern browsers and in IE >= 7 (slight float drops in IE7 upon window resize caused by sub-pixel rounding but I can live with that)
* Uses [selectivizr.js](https://github.com/keithclark/selectivizr) and [respond.js](https://github.com/scottjehl/Respond) to get support for CSS3 selectors and screen-size based media-queries in IE >=7
View
2  css/screen.css
@@ -46,7 +46,7 @@ reflowing grids of items
display:inline-block;
vertical-align:top;
width:47.826087%; /*440/920*/
- margin:0 4.3478261% 3em 0; /*40/920*/
+ margin:0 4.3478261% 4.3478261% 0; /*40/920*/
background:yellow;
font-size:14px; /*restore font size for browsers not supporting rems*/
font-size:1rem; /*restore font size for browsers supporting rems*/
View
46 index.html
@@ -31,7 +31,7 @@
<li>Uses display:inline-block; and media queries</li>
<li>Reflows depending on the available width (4 items per row > 3 items per row > 2 items per row)</li>
<li>Plays nice with items of various lengths</li>
- <li>Prevent the <a href="http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/">whitespace bug between items</a></li>
+ <li>Prevent the <a href="http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/">whitespace bug between items</a>. If you really want to be on the safe side here, use HTML comments to eliminate whitespace or block your begin and end tags together.</li>
<li>Tested in all modern browsers and in IE >= 7 (slight float drops in IE7 upon window resize but I can live with that)</li>
<li>Uses <a href="https://github.com/keithclark/selectivizr">selectivizr</a> and <a href="https://github.com/scottjehl/Respond">respond</a> to get support for CSS3 selectors and screen-size based media-queries in IE</li>
</ul>
@@ -41,58 +41,58 @@
<p class="imgholder"><img src="img/placeholder_16-9.png" /></p>
<h3>Block 1</h3>
<p>Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis</p>
- </li>
- <li class="item">
+ </li><!--
+ --><li class="item">
<p class="imgholder"><img src="img/placeholder_16-9.png" /></p>
<h3>Block 2</h3>
<p>Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis</p>
- </li>
- <li class="item">
+ </li><!--
+ --><li class="item">
<p class="imgholder"><img src="img/placeholder_16-9.png" /></p>
<h3>Block 3</h3>
<p>Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis. Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis</p>
- </li>
- <li class="item">
+ </li><!--
+ --><li class="item">
<p class="imgholder"><img src="img/placeholder_16-9.png" /></p>
<h3>Block 4</h3>
<p>Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis</p>
- </li>
- <li class="item">
+ </li><!--
+ --><li class="item">
<p class="imgholder"><img src="img/placeholder_16-9.png" /></p>
<h3>Block 5</h3>
<p>Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis</p>
- </li>
- <li class="item">
+ </li><!--
+ --><li class="item">
<p class="imgholder"><img src="img/placeholder_16-9.png" /></p>
<h3>Block 6</h3>
<p>Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis</p>
- </li>
- <li class="item">
+ </li><!--
+ --><li class="item">
<p class="imgholder"><img src="img/placeholder_16-9.png" /></p>
<h3>Block 7</h3>
<p>Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis</p>
- </li>
- <li class="item">
+ </li><!--
+ --><li class="item">
<p class="imgholder"><img src="img/placeholder_16-9.png" /></p>
<h3>Block 8</h3>
<p>Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis</p>
- </li>
- <li class="item">
+ </li><!--
+ --><li class="item">
<p class="imgholder"><img src="img/placeholder_16-9.png" /></p>
<h3>Block 9</h3>
<p>Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis</p>
- </li>
- <li class="item">
+ </li><!--
+ --><li class="item">
<p class="imgholder"><img src="img/placeholder_16-9.png" /></p>
<h3>Block 10</h3>
<p>Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis. Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis. Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis</p>
- </li>
- <li class="item">
+ </li><!--
+ --><li class="item">
<p class="imgholder"><img src="img/placeholder_16-9.png" /></p>
<h3>Block 11</h3>
<p>Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis</p>
- </li>
- <li class="item">
+ </li><!--
+ --><li class="item">
<p class="imgholder"><img src="img/placeholder_16-9.png" /></p>
<h3>Block 12</h3>
<p>Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis</p>
Please sign in to comment.
Something went wrong with that request. Please try again.