Responsive design + differently sized images = Frustratingly hard to figure out

By the title of this post you should gather that this assignment was difficult, very very very difficult. Not sure why but it was. It still makes me sweat when I think about it.  http://www.circuslabs.net/~sean.ohare/webdev2/week6/

<div class=”col-3″>

<div class=”col-1″>

<a class=”project shilling” href=”#”>
<h2>The Shilling Group</h2>
<figure></figure>
</a>
<a class=”project look” href=”#”>
<h2>Project LookLook</h2>
<figure></figure>
</a>
</div>

<a class=”project edinburgh” href=”#”>
<h2>Project Edinburgh</h2>
<figure></figure>
</a>
<a class=”project blythswood” href=”#”>
<h2>Project Blythswood Square</h2>
<figure></figure>
</a>
<a class=”project baillie” href=”#”>
<h2>Baillie Gifford</h2>
<figure></figure>
</a>
</div>”

This is the first time I’ve really worked on my own with the <figure> tag. Not really difficult to work with but hard to maneuver using the floats and making sure, especially with the format, that the “Touch Agency” was happy with the layout that they originally asked for.  Floating images inside columns within columns also very difficult.