Merge pull request #26 from Germain-Italic/master

Responsive support

csphotoselector.css

@@ -278,3 +278,41 @@
 .CSPhoto_container_active {
   left: 11px;
 }
+
+/* responsive support */
+/* optimized for iPhone 5 and upper
+ * will produce a 1-column albums list
+ * and a 2-columns photos list
+ */
+@media screen and (max-width: 650px) {
+  #CSPhotoSelector {
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    align-items: center;
+  }
+  #CSPhotoSelector .CSPhotoSelector_dialog {
+    display: block;
+    align-items: center;
+    width: 300px;
+    margin: 0 auto;
+    margin-top: 10%;
+  }
+  #CSPhotoSelector .CSPhotoSelector_dialog .CSPhotoSelector_photosContainer {
+    height: 315px;
+    overflow: scroll;
+  }
+  #CSPhotoSelector .CSPhotoSelector_dialog .CSAlbum_container .CSPhotoSelector_album {
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+  }
+  #CSPhotoSelector .CSPhotoSelector_dialog .CSPhotoSelector_content.CSPhotoSelector_wrapper.CSPhoto_container_active {
+    width: 278px;
+    top: 42px;
+  }
+  #CSPhotoSelector .CSPhotoSelector_dialog .CSPhoto_container .CSPhotoSelector_photo {
+    width: 117px;
+    height: 86px;
+  }
+}

index.html

@@ -60,12 +60,11 @@ <h4>This is based on the Friend Selector plugin created by <a href="http://www.t
     <!-- Markup for Carson Shold's Photo Selector -->
     <div id="CSPhotoSelector">
       <div class="CSPhotoSelector_dialog">
-        <a href="#" id="CSPhotoSelector_buttonClose">x</a>
         <div class="CSPhotoSelector_form">
           <div class="CSPhotoSelector_header">
-            <p>Choose from Photos</p>
+              <a href="#" id="CSPhotoSelector_buttonClose">x</a>
+              <p>Choose from Photos</p>
           </div>
-
           <div class="CSPhotoSelector_content CSAlbumSelector_wrapper">
             <p>Browse your albums until you find a picture you want to use</p>
             <div class="CSPhotoSelector_searchContainer CSPhotoSelector_clearfix">