diff --git a/_sass/includes/homepage-hero-band.scss b/_sass/includes/homepage-hero-band.scss
index ee5eed8443e..09eb27e0c84 100644
--- a/_sass/includes/homepage-hero-band.scss
+++ b/_sass/includes/homepage-hero-band.scss
@@ -48,23 +48,51 @@
 
     .light-blue { color:$quarkus-blue; }
 
-    @media screen and (max-width: 1000px) {
+    @media screen and (max-width: 1024px) {
     grid-column: span 12;
      
        h2 {
        font-size: 5rem;
-       line-height: 4.5rem;
+       line-height: 5rem;
        }
     }
 
-    @media screen and (max-width: 600px) {
+    @media screen and (max-width: 550px) {
+      grid-column: span 12;
+
+      h2 {
+        font-size: 3.8rem;
+        line-height: 3.8rem;
+      }
+    }
+
+    @media screen and (max-width: 425px) {
+      grid-column: span 12;
+
+      h2 {
+        font-size: 3rem;
+        line-height: 3rem;
+      }
+    }
+
+    @media screen and (max-width: 375px) {
     grid-column: span 12;
-     
-       h2 {
-       font-size: 4rem;
-       line-height: 3.9rem;
-       }
+        
+        h2 {
+        font-size: 2.8rem;
+        line-height: 2.8rem;
+      }
     }
+
+    @media screen and (max-width: 320px) {
+      grid-column: span 12;
+        
+        h2 {
+        font-size: 2.5rem;
+        line-height: 2.5rem;
+      }
+    }
+
   }