CodePen

HTML

            
              <ul>
<li>
    <object type="image/svg+xml" data="http://alistapart.com/d/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii/paintbrush.svg">Fall back content</object>
  </li
  ><li>
    <object type="image/svg+xml" data="http://craigwebbart.com/csw/images/cwebba_logo4.svg">Fall back content</object>
  </li
  ><li>
    <object type="image/svg+xml" data="http://craigwebbart.com/csw/images/paintbrush_csw02.svg">Fall back content</object>
</li>
</ul>
            
          
!

CSS

            
              * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

img, object {
  height: auto;
  max-width: 100%;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
width:100%;
}

li {
  padding: .625em;
}

@media only screen and (min-width: 30em) { 
  
  /*ul {
    width: 37.5em;
  }*/
  
  li {
    width: 33.33%;
    background:#BCF;
}
  
  li {
    display: inline-block;
  }
  
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................