event display formatting

index.php

@@ -228,6 +228,7 @@ $archery_schedules = $archery_schedules["events"];
 
     <?php date_default_timezone_set("Europe/London"); ?>
                 <div class="h-event" vocab="https://schema.org/" typeof="Event">
+
                     <h3 class="p-name" property="name">
                         <?php echo($event['name']) ?>
                     </h3>
@@ -263,6 +264,9 @@ $archery_schedules = $archery_schedules["events"];
                             </a>
                         </span>
                     </div>
+                    <div>
+                        <strong>Tickets:</strong> <a href="<?php echo($event_schedule['url']); ?>"><?php echo($event_schedule['url']); ?></a>
+                    </div>
                     <p class="p-summary" property="description">
                         <?php echo($event['description']) ?>
                     </p>

style.css

@@ -291,23 +291,6 @@ label.wide {
   max-width: 50%;
 }
 
-.h-feed {
-    display: flex;
-    align-items:baseline;
-    flex-grow: 1;
-    flex-wrap: wrap;
-    justify-content:flex-start;
-}
-
-.h-feed .h-event {
-    max-width: 50%;
-    padding: 0 1%;
-}
-
-.h-event strong, .h-event .p-summary, .h-event .offer {
-    display: none;
-}
-
 .disciplinelist > * {
     clear: both;
 }
@@ -332,7 +315,7 @@ label.wide {
 }
 
 .disciplinelist > div details .description {
-    font-size: 1.1em;   
+    font-size: 1.1em;
     color: #222;
 }
 
@@ -342,7 +325,26 @@ label.wide {
     height: auto;
 }
 
+.h-feed .h-event {
+    margin-left: 2em;
+    font-size: 0.9em;
+}
+
+.h-feed .h-event h3 {
+    font-size: 1em;
+    margin-bottom: 0;
+}
+
+.h-feed .h-event .p-summary, .h-feed .h-event .offer, .h-feed .h-event .addr {
+    display: none;
+}
+
+
 @media screen and (max-width: 54em) {
+    body {
+        padding: 1em;
+    }
+
     .grid > div {
         max-width: 48%;
     }
@@ -357,4 +359,7 @@ label.wide {
         margin-right: 5%;
     }
 
+    .h-feed .h-event {
+        margin-left: 1em;
+    }
 }