added media queries to css

public/assets/css/allStyle.css

@@ -25,6 +25,18 @@
 	width: 22%;
 }
 
+footer {
+	width: 100%;
+	margin-bottom: 2px;
+	padding-bottom: 2px;
+	border-bottom: 1px lightgrey solid;
+	margin-top: 2px;
+	padding-top: 2px;
+	border-top: 1px lightgrey solid;
+	text-align: center;
+	color: grey;
+}
+
 /* panels */
 
 .panel {
@@ -83,3 +95,57 @@ h4 {
 .toggle-link {
 	float: right;
 }
+
+@media (max-width: 1250px) {
+
+    .wrapper {
+		margin-left: 10%;
+		width:80%;
+	}
+
+}
+
+@media (max-width: 1000px) {
+
+    .wrapper {
+		margin-left: 10%;
+		width:80%;
+	}
+
+	.main {
+		float: none;
+		width: 100%;
+		margin-right: 0px;
+		padding-right: 0px;
+		border-right: 0px;
+		margin-bottom: 5px;
+	}
+
+	.sidebar {
+		float: none;
+		width: 100%;
+	}
+
+}
+
+@media (max-width: 750px ) {
+	.col-left, .col-right {
+		float: none;
+		margin: 0px;
+		padding: 0px;
+		width: 100%;
+	}
+
+	.col-right {
+		padding-top: 20px;
+	}
+}
+
+@media (max-width: 475px) {
+
+    .wrapper {
+		margin: 0px;
+		width: 100%;
+    }
+
+}

public/assets/css/componentStyle.css

@@ -25,24 +25,6 @@
 	margin: 5px 15px 5px 0px;
 }
 
-/* meme */
-canvas {
-  background-color: white; 
-  width: 100%;
-  height: auto;
-}
-
-/* publish */
-#drop-zone {
-	border: 1px dashed lightgrey;
-	padding: 1em;
-	height: 6em;
-}
-
-#image-preview {
-	display: none;
-}
-
 /* all claims */
 
 .all-claims-item {
@@ -58,21 +40,23 @@ canvas {
 	margin: 5px 30px 5px 0px;
 }
 
-/* footer */
+/* publish */
-
+#drop-zone {
-footer {
+	border: 1px dashed lightgrey;
-	width: 100%;
+	padding: 1em;
-	margin-bottom: 2px;
+	height: 6em;
-	padding-bottom: 2px;
-	border-bottom: 1px lightgrey solid;
-	margin-top: 2px;
-	padding-top: 2px;
-	border-top: 1px lightgrey solid;
-	text-align: center;
-	color: grey;
 }
 
-/* meme fodder */
+#image-preview {
+	display: none;
+}
+
+/* meme */
+canvas {
+  background-color: white; 
+  width: 100%;
+  height: auto;
+}
 
 .meme-fodder-img {
 	width: 21%;

views/partials/publish.handlebars

@@ -15,13 +15,11 @@
 			<input type="text" id="publish-name" placeholder="Your claim name" class="form-control">
 			<p>
 			<label for="publish-license">License:</label>
-			<br/>
 			<select type="text" id="publish-license" name="license" value="license">
 				<option value="Public Domain">Public Domain</option>
 				<option value="Creative Commons">Creative Commons</option>
 			</select> 
-			</p>
+			<br />
-			<p>
 			<input type="checkbox" id="publish-nsfw">
 			<label for="publish-nsfw">NSFW</label>
 			</p>