Looking to create a responsive design for a follow page.
Although I've managed to make it work, adding a line at the top of each row is causing layout issues and the Box container is not displaying consistently in size.
I attempted to set up a fiddle example, but for some reason, the design breaks when using this method.
Fiddle Update: http://jsfiddle.net/uNjLu/5/
I want my page to look like the image below. How can this be achieved while maintaining responsive design?
<div class="large-12 content">
<div class="cover-wrapper">
<div class="cover-inner">
<div>
<img src="http://placehold.it/243x324&text=[img 1]">
</div>
</div>
</div>
<div class="cover-wrapper">
<div class="cover-inner">
<div>
<img src="http://placehold.it/243x324&text=[img 2]">
</div>
</div>
</div>
<div class="cover-wrapper">
<div class="cover-inner">
<div>
<img src="http://placehold.it/243x324&text=[img 3]">
</div>
</div>
</div>
<div class="cover-wrapper">
<div class="cover-inner">
<div>
<img src="http://placehold.it/243x324&text=[img 4]">
</div>
</div>
</div>