My CSS Code includes media queries to adjust the layout:
.clearfloat {
clear: both;
font-size: 1px;
height: 0;
line-height: 0;
}
.box-container {
width:100%;
text-align:center;
}
.icon-box {
width:32%;
max-width:500px;
display:inline-block;
border:1px solid #CCC;
margin-top:10px;
margin-bottom:10px;
}
@media screen and (max-width: 990px) {
.icon-box {
width:290px;
}
}
@media screen and (max-width: 960px) {
.icon-box {
width:270px;
}
}
@media screen and (max-width: 880px) {
.clearfloat {
display:none;
}
.icon-box {
width:80%;
margin:0 auto 0 auto;
margin-top:10px;
margin-bottom:10px;
}
}
I'm trying to set a min-height for each box, but when I do so, they no longer display inline.
For more details, check out this Fiddle with the complete CSS and HTML Code: http://jsfiddle.net/aAtk5/1/