Make user-solutions.html responsive with Bootstrap. Needs position fixing

2 files changed, 44 insertions, 46 deletions

diff --git a/assets/css/creative.css b/assets/css/creative.css
index 0155dba..9ec2c72 100644
--- a/assets/css/creative.css
+++ b/assets/css/creative.css
@@ -3,7 +3,7 @@
 /*}*/
 main .search {
     width: 60%;
-    height: 100%;
+    min-height: 100%;
 }
 
 .search-cover {
@@ -21,6 +21,16 @@ main .search {
         padding-top: 10%;
         padding-bottom: 10%;
     }
+
+    main .search {
+        width: 80%;
+    }
+}
+
+@media only screen and (max-width: 485px) {
+    main .search {
+        width: 100%;
+    }
 }
 
 
diff --git a/assets/css/style.css b/assets/css/style.css
index ff26ab4..4fb96fb 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -48,9 +48,6 @@ main{
 
 /* Changes - search is a flex container for h2 and bar, removed various attributes */
 main .search {
-	flex: 1;
-	min-width: 60%;
-	min-height: 100%;
 	background-color: rgba(235,235,235, 0.7);
 	overflow: auto;
 
@@ -131,79 +128,69 @@ main div {
 	background: none;
 }
 
-main #solutions button#add-solution {
+main button#add-solution {
 	display: inline-block;
-	border-radius: 10px;
 	background-color: #87B6A7; 
 	color: white;
-	width: 110px;
+}
 
+.top-sol {
+    margin-top: 20px;
 }
 
-main p#show-path {
+.show-path{
+    margin-top: 10px;
+}
+
+main button#add-solution h3 {
+    margin: 0;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    font-size: 1em;
+}
+
+main p.show-path {
 	display: inline-block;
-	margin-left: 30px;
 	color: #6f6f6f;
-
 }
 
 main #solutions {
 	padding-top: 2%;
 	text-align: left; 
-	width: 86%;
-	height: 100%;
 	margin-left: 7%;
-
 }
 
-
 main [id^="sol-"] {
+    text-align: left;
 	color: #333;
 	margin-top: 30px;
 	margin-bottom: 30px;
-	-moz-border-radius: 15px;
-	border-radius: 15px;
-	-moz-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);;
-	-webkit-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);;
-	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);;
+	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    padding: 0;
 }
 
 main [id^="sol-"] .post-info {
-	display: flex;
-	justify-content: space-between;
+    display: flex;
+    justify-content: space-between;
 	background: #F79F79; 
 	padding-top: 2%;
 	border-top-right-radius: 15px;
 	border-top-left-radius: 15px;
 	padding-bottom: 5px;
-}
-
-main [id^="sol-"] .left{
-	float: left;
-	display: inline-block;
-}
-
-main [id^="sol-"] .right {
-	float: right;
-	display: inline-block;
+    width: 100%;
 }
 
 main [id^="sol-"] img.user-image {
-	border-radius: 50%;
 	border: 2px solid darkgray;
 	margin-left: 25px;
 }
 
-main [id^="sol-"] img.user-image, [id^="sol-"] p.username {
-	display: inline-block;	
+.upvoting, .downvoting, .upvote, .downvote, .user-image, .username {
+    display: inline-block;
 }
 
 main [id^="sol-"] p.username {
-	vertical-align: top;
-}
-
-main [id^="sol-"] p.num-upvotes, [id^="sol-"] p.num-downvotes, [id^="sol-"] button {
-	display: inline-block;
+	vertical-align: middle;
 }
 
 main [id^="sol-"] button.upvote, [id^="sol-"] button.downvote {
@@ -221,7 +208,7 @@ main [id^="sol-"] button.upvote img, [id^="sol-"] button.downvote img {
 }
 
 main [id^="sol-"] p.num-downvotes, [id^="sol-"] p.num-upvotes {
-	vertical-align: top;
+	vertical-align: bottom;
 }
 
 
@@ -234,6 +221,7 @@ main [id^="sol-"] p.num-downvotes {
 }
 
 main [id^="sol-"] div.user-sol h3 {
+    font-size: 1.17em;
 	background-color: #f0e9e1;
 	padding: 10px;
 	padding-left: 20px;
@@ -252,18 +240,15 @@ main [id^="sol-"] div.user-sol p img {
 	height: auto;
 }
 
-main [id^="sol-"] div.comments { /* BORDER RADIUS ISN'T WORKING - sad :( */
+main [id^="sol-"] div.comments { 
 	background-color: #f0e9e1;
 	border-bottom-right-radius: 15px;
 	border-bottom-left-radius: 15px;
 	padding: 10px;
 }
 
-main [id^="sol-"] div.comments:hover {
-
-}
-
 main [id^="sol-"] div.comments h3 { 
+    font-size: 1.17em;
 	padding: 10px;
 	padding-left: 20px;
 	margin-top: 0;
@@ -271,7 +256,6 @@ main [id^="sol-"] div.comments h3 {
 }
 
 main [id^="sol-"] div.comments ul li img {
-	border-radius: 50%;
 	width: 40px;
 	vertical-align: top;
 }
@@ -288,6 +272,10 @@ main [id^="sol-"] div.comments ul li {
 	margin-bottom: 15px;
 }
 
+.comments ul {
+
+}
+
 main [id^="sol-"] div.comments ul li p.comment-username {
 	margin-bottom: 0;
 	margin-top: 5px;