Responsive grid.

css/styles.css

@@ -4,7 +4,8 @@
 }
 
 .photo_list {
-  width: 25%;
+  width: 100%;
+  max-height:100px;
 }
 
 .single_photo {

photos.html

@@ -46,12 +46,20 @@
         <li><a href="photos.html">Graffiti album</a></li>
       </ol>
 
-      <a href="photo1.html"><img class="photo_list" src="images/img_1.jpg" alt="Graffiti cover image" /></a>
-      <a href="photo1.html"><img class="photo_list" src="images/img_2.jpg" alt="Graffiti cover image" /></a>
-      <a href="photo1.html"><img class="photo_list" src="images/img_3.jpg" alt="Graffiti cover image" /></a>
-      <a href="photo1.html"><img class="photo_list" src="images/img_4.jpg" alt="Graffiti cover image" /></a>
-      <a href="photo1.html"><img class="photo_list" src="images/img_5.jpg" alt="Graffiti cover image" /></a>
-
+      <div class="row">
+        <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/img_1.jpg" alt="Graffiti cover image" /></a></div>
+        <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/img_2.jpg" alt="Graffiti cover image" /></a></div>
+        <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/img_3.jpg" alt="Graffiti cover image" /></a></div>
+        <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/img_4.jpg" alt="Graffiti cover image" /></a></div>
+        <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/img_5.jpg" alt="Graffiti cover image" /></a></div>
+        <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/img_6.jpg" alt="Graffiti cover image" /></a></div>
+        <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/img_7.jpg" alt="Graffiti cover image" /></a></div>
+        <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/img_8.jpg" alt="Graffiti cover image" /></a></div>
+        <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/img_9.jpg" alt="Graffiti cover image" /></a></div>
+        <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/img_10.jpg" alt="Graffiti cover image" /></a></div>
+        <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/img_11.jpg" alt="Graffiti cover image" /></a></div>
+        <div class="col-xs-6 col-md-3 col-lg-2"><a href="photo1.html"><img class="photo_list" src="images/img_12.jpg" alt="Graffiti cover image" /></a></div>
+      </div><!-- / row -->
     </div>
   
     <script src="js/jquery.min.js"></script> <!-- jquery libraries -->