CodePen

HTML

            
              <ul id="latest-pubs">
	<li>
		<div class="pubs">
			<div class="pub-cover"><img src="http://i.imgur.com/yWWO7Fn.png" /></div>
			<div class="pub-details">
				<p>
				<span class="boldText">MODULUS<br>July 2012</span><br>Vol. 22 No. 1</span>
				</p>
			</div>
		</div>
	</li>
	
	<li>
		<div class="pubs">
			<div class="pub-cover"><img src="http://i.imgur.com/pMLNomo.png" /></div>
			<div class="pub-details">
				<p>
				<span class="boldText">SSE-SL<br>Proceedings of the Second Annual Sessions</span><br>September 2012</span>
				</p>
			</div>
		</div>
	</li>
	
	<li>
		<div class="pubs">
			<div class="pub-cover"><img src="http://i.imgur.com/9TOYEZK.png" /></div>
			<div class="pub-details">
				<p>
				<span class="boldText">Graded Examples in Reinforced Concrete Design to Euro Code 3 (3rd Edition)</span></span>
				</p>
			</div>
		</div>
	</li>
</ul><!-- End of latest-pubs-->
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              #latest-pubs li { display:inline-block; margin:0 40px 0 0; }

.pubs { width:150px; height:220px; }

.pub-cover { width:120px; height:150px; margin:0 auto; }

.pub-cover img { width:100%; height:100%; }

.pub-details { width:120px; height:70px; margin:0 auto; font-size:9pt; }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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