CSS tweaks to event page

2 files changed, 33 insertions, 15 deletions

diff --git a/public/css/style.css b/public/css/style.css
index ec43118..76dec5b 100755
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -7,20 +7,7 @@ body, html {
 @media (max-width: 576px) {
 	#container {
 		height: auto !important;
-	}
-}
-
-@media (min-width: 577px) {
-	#sidebar {
-		border-right: 2px solid #e0e0e0;
-		min-height: 100vh;
-	}
-	body {
-		background: #f5f5f5; /* Old browsers */
-		background: -moz-linear-gradient(left, #f5f5f5 0%, #f5f5f5 50%, #ffffff 51%, #ffffff 100%); /* FF3.6-15 */
-		background: -webkit-linear-gradient(left, #f5f5f5 0%,#f5f5f5 50%,#ffffff 51%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
-		background: linear-gradient(to right, #f5f5f5 0%,#f5f5f5 50%,#ffffff 51%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
+		overflow-x: hidden;
 	}
 }
 
@@ -261,3 +248,34 @@ body, html {
 #removeAttendee:hover {
 	color: #c82333;
 }
+
+#eventAttendees h5 {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+}
+#eventAttendees h5 .btn-group {
+	margin-top: 0.5rem;
+}
+
+@media (min-width: 577px) {
+	#sidebar {
+		border-right: 2px solid #e0e0e0;
+		min-height: 100vh;
+	}
+	body {
+		background: #f5f5f5; /* Old browsers */
+		background: -moz-linear-gradient(left, #f5f5f5 0%, #f5f5f5 50%, #ffffff 51%, #ffffff 100%); /* FF3.6-15 */
+		background: -webkit-linear-gradient(left, #f5f5f5 0%,#f5f5f5 50%,#ffffff 51%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
+		background: linear-gradient(to right, #f5f5f5 0%,#f5f5f5 50%,#ffffff 51%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
+	}
+	#eventAttendees h5 {
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+	}
+	#eventAttendees h5 .btn-group {
+		margin-top: 0;
+	}
+}
diff --git a/views/event.handlebars b/views/event.handlebars
index be5a9f8..9314c09 100755
--- a/views/event.handlebars
+++ b/views/event.handlebars
@@ -95,7 +95,7 @@
 
 {{#if eventData.usersCanAttend}}
 <div class="card mb-4" id="eventAttendees">
-	<h5 class="card-header" style="width:100%;display:flex;justify-content:space-between;align-items:center">Attendees {{#if eventData.attendees}}({{eventData.attendees.length}}){{/if}}
+	<h5 class="card-header">Attendees {{#if eventData.attendees}}({{eventData.attendees.length}}){{/if}}
 		<div class="btn-group" role="group" aria-label="Attendance controls">
 			<button type="button" id="attendEvent" class="btn btn-success" data-toggle="modal" data-target="#attendModal"><i class="fas fa-user-plus"></i> Add me</button>
 			<button type="button" id="unattendEvent" class="btn btn-secondary" data-toggle="modal" data-target="#unattendModal"><i class="fas fa-user-times"></i> Remove me</button>