Add dimensions to hero image so the browser can reserve the right amo…

…unt of space for it while its loading
seattlejs · Aug 6, 2024 · 86cc477 · 86cc477
1 parent 6774981
commit 86cc477
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/app/pages/index.html b/app/pages/index.html
@@ -1,5 +1,5 @@
 <my-layout>
-    <img src="/_public/images/blank-seattlejs-header.png" alt="SeattleJS header image" width="2535" height="912" />
+    <img class="hero-image" src="/_public/images/blank-seattlejs-header.png" alt="SeattleJS header image" width="2535" height="912" />
     <div id="page">
         <h2>Upcoming Meetups</h2>
         <iframe

diff --git a/public/styles/main.css b/public/styles/main.css
@@ -60,6 +60,10 @@ a[target="_blank"]:after {
     padding: 8px 24px;
 }
 
+.hero-image {
+    height: auto;
+}
+
 .cta {
     font-family: headline-gothic-atf-round, sans-serif;
     background-color: #0033FF;