Index: lams_tool_assessment/web/pages/monitoring/monitoring.jsp
===================================================================
diff -u -r36716004da333fcc5eb3f776801e3e5278719fd7 -r5cd084f4d230ff2f8ee3f69a4e59272af1617598
--- lams_tool_assessment/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 36716004da333fcc5eb3f776801e3e5278719fd7)
+++ lams_tool_assessment/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 5cd084f4d230ff2f8ee3f69a4e59272af1617598)
@@ -32,13 +32,8 @@
 	  			text-align: center;
 	  		}
 	  		
-	  		#completion-charts-container {
-	  			display: flex;
-	  		}
-	  		
 	  		#completion-charts-container > div {
-	  			width: 40%;
-	  			margin: auto;
+	  			padding: 5rem 2rem;
 	  		}
  		</style>
  		
Index: lams_tool_assessment/web/pages/monitoring/summary.jsp
===================================================================
diff -u -r36716004da333fcc5eb3f776801e3e5278719fd7 -r5cd084f4d230ff2f8ee3f69a4e59272af1617598
--- lams_tool_assessment/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 36716004da333fcc5eb3f776801e3e5278719fd7)
+++ lams_tool_assessment/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 5cd084f4d230ff2f8ee3f69a4e59272af1617598)
@@ -384,7 +384,7 @@
 					}
 				},
 				legend : {
-					position: 'right',
+					position: 'left',
 					labels : {
 						generateLabels : function(chart) {
 							var data = chart.data;
@@ -861,15 +861,15 @@
 			</lams:Alert>
 		</c:when>
 		<c:otherwise>
-		<div id="completion-charts-container">
-			<div>
-				<canvas id="activity-completion-chart"></canvas>
+			<div id="completion-charts-container">
+				<div class="col-sm-12 col-md-6">
+					<canvas id="activity-completion-chart"></canvas>
+				</div>
+				
+				<div class="col-sm-12 col-md-6">
+					<canvas id="answered-questions-chart"></canvas>
+				</div>
 			</div>
-			
-			<div>
-				<canvas id="answered-questions-chart"></canvas>
-			</div>
-		</div>
 		</c:otherwise>
 	</c:choose>