more mobile tweaks\

Author: JonRowe

_styles/default.sass

@@ -62,35 +62,29 @@ $other:  min-width 476px
       @include background-size(100%,auto)
       @include breakpoint($mobile)
         h2
-          margin-bottom: 150px
+          padding: 0 0.5em
+        p
+          margin: 0
+          padding: 0.5em
       @include breakpoint($other)
         height: 560px
         h2
-          float: left
-          margin: 1em
-        p
+          top: 0.5em
+          left: 1em
+        h2, p
           position: absolute
+          padding: 0.5em
+        p
           right: 0.25em
           bottom: 0
           width: 80%
           background: rgba(16,16,16,0.8)
       h2
         background: white
       h2, p
-        padding: 0.5em
         font-size: 1.5em
       p
-        clear: left
         background: #222
         color: white
     a
       text-decoration: none
-
-    #folksy
-      background: url('/images/folksy.png') no-repeat
-    #summer_of_cycling
-      background: url('/images/summer_of_cycling.png') no-repeat
-    #helpout
-      background: url('/images/helpout.png') no-repeat
-    #foodhospital
-      background: url('/images/foodhospital.png') no-repeat

index.html

@@ -25,6 +25,7 @@
       <div class='carousel-inner'>
         <li id='folksy' class='item active'>
           <h2>Folksy</h2>
+          <img alt='screenshot' src='/images/folksy.png' />
           <p>
           We performed consultancy for Folksy (a hand crafted goods market
           place) helping them launch a new flatrate payments plan for their
@@ -34,6 +35,7 @@ <h2>Folksy</h2>
         </li>
         <li id='summer_of_cycling' class='item'>
           <h2>Summer Of Cycling (Challenge for Change)</h2>
+          <img alt='screenshot' src='/images/summer_of_cycling.png' />
           <p>
           We worked with challenge for change to produce a prototype "Pledge"
           application with photo sharing and integration with Facebook. All to
@@ -42,13 +44,15 @@ <h2>Summer Of Cycling (Challenge for Change)</h2>
         </li>
         <li id='helpout' class='item'>
           <h2>Help Out (FutureGov)</h2>
+          <img alt='screenshot' src='/images/helpout.png' />
           <p>
           We helped FutureGov to produce a prototype web app to encourage civic
           action in and around Surrey for Surrey County Council.
           </P>
         </li>
         <li id='foodhospital' class='item'>
           <h2>Food Hospital (Mudlark/Channel4)</h2>
+          <img alt='screenshot' src='/images/foodhospital.png' />
           <p>
           We supported Mudlark to develop an app for Channel4's Food Hospital
           show; accessible via the show's microsite, as a Facebook app and 

styles/default.css

@@ -477,35 +477,30 @@ footer {
     background-size: 100%, auto; }
     @media screen and (max-width: 476px) {
       #page1 #work li h2, #page2 #work li h2 {
-        margin-bottom: 150px; } }
+        padding: 0 0.5em; }
+      #page1 #work li p, #page2 #work li p {
+        margin: 0;
+        padding: 0.5em; } }
     @media screen and (min-width: 476px) {
       #page1 #work li, #page2 #work li {
         height: 560px; }
         #page1 #work li h2, #page2 #work li h2 {
-          float: left;
-          margin: 1em; }
-        #page1 #work li p, #page2 #work li p {
+          top: 0.5em;
+          left: 1em; }
+        #page1 #work li h2, #page1 #work li p, #page2 #work li h2, #page2 #work li p {
           position: absolute;
+          padding: 0.5em; }
+        #page1 #work li p, #page2 #work li p {
           right: 0.25em;
           bottom: 0;
           width: 80%;
           background: rgba(16, 16, 16, 0.8); } }
     #page1 #work li h2, #page2 #work li h2 {
       background: white; }
     #page1 #work li h2, #page1 #work li p, #page2 #work li h2, #page2 #work li p {
-      padding: 0.5em;
       font-size: 1.5em; }
     #page1 #work li p, #page2 #work li p {
-      clear: left;
       background: #222222;
       color: white; }
   #page1 #work a, #page2 #work a {
     text-decoration: none; }
-  #page1 #work #folksy, #page2 #work #folksy {
-    background: url("/images/folksy.png") no-repeat; }
-  #page1 #work #summer_of_cycling, #page2 #work #summer_of_cycling {
-    background: url("/images/summer_of_cycling.png") no-repeat; }
-  #page1 #work #helpout, #page2 #work #helpout {
-    background: url("/images/helpout.png") no-repeat; }
-  #page1 #work #foodhospital, #page2 #work #foodhospital {
-    background: url("/images/foodhospital.png") no-repeat; }