diff --git a/sass/components/_singleEvent.scss b/sass/components/_singleEvent.scss
index 08281594..d006f1d8 100644
--- a/sass/components/_singleEvent.scss
+++ b/sass/components/_singleEvent.scss
@@ -44,6 +44,10 @@
       font-size: 20px;
     }
   }
+  
+  .event-name-short {
+      font-size: 150%;
+  }
 
   .hero-event-info {
     height: auto;
diff --git a/src/components/SingleEvent.js b/src/components/SingleEvent.js
index f3b96185..e84fdcd4 100644
--- a/src/components/SingleEvent.js
+++ b/src/components/SingleEvent.js
@@ -54,8 +54,8 @@ function SingleEvent() {
         {/* hero event info right side */}
         <div className="hero-event-desc">
 
-          <p className={`event-name ${eventName.length < 30 ?
-            "event-name-short" : ""}`}>
+          <p className={"event-name " + (eventName.length > 30 ?
+            "event-name-short" : "")}>
             {eventName}
           </p>