From 7aec5368d887974b74d87e215e39da48fc971f65 Mon Sep 17 00:00:00 2001
From: Sam Walker <sw15612@my.bristol.ac.uk>
Date: Fri, 11 May 2018 11:39:58 +0100
Subject: [PATCH] Use flexbox for responsive package grid

---
 app/scss/packagegrid.scss | 26 ++++++++++++++++----------
 app/scss/page.scss        |  4 ++--
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/app/scss/packagegrid.scss b/app/scss/packagegrid.scss
index dfdc009a..f1de7c87 100644
--- a/app/scss/packagegrid.scss
+++ b/app/scss/packagegrid.scss
@@ -1,26 +1,32 @@
 .packagegrid {
-	list-style: none;
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: row;
+	flex-grow: 1;
+	flex-shrink: 1;
+	
 	padding: 0;
 	margin: 0;
 }
 
 .packagegrid li {
-	list-style: none;
-	display: inline-block;
-	padding: 0;
-	margin: 8px;
+	flex: 1;
+	display: block;	
+	min-width: 246px;
+	min-height: 164px;
+	padding: 1;
+	margin: 5px;	
 }
 
 .packagegrid a {
 	display: block;
-	width: 246px;
-	height: 164px;
+	padding-bottom: 66.66%;
 	border-radius: 7px;
 	position: relative;
 	overflow: hidden;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
+    	background-size: cover;
+	background-repeat: no-repeat;
+    	background-position: center;
 }
 
 
diff --git a/app/scss/page.scss b/app/scss/page.scss
index 2aede6f8..c816b66e 100644
--- a/app/scss/page.scss
+++ b/app/scss/page.scss
@@ -6,7 +6,7 @@ html, body {
 	margin: 0;
 }
 
-nav, main, #alerts {
+nav, main, #alerts {     	   
 	width: 90%;
 	max-width: 960px;
 	margin: auto;
@@ -57,7 +57,7 @@ nav a:hover {
 
 header {
 	padding: 20px;
-	background: #113;
+	background: #2988a4;
 }
 
 header p {