From 11bcae430c9a79c82f4aad3625887083cd6e082a Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Wed, 3 Jul 2024 06:35:22 +0200
Subject: [PATCH] Show demo only at 760+px (#33529)

---
 sass/homeassistant/homepage/_hero_unit.scss | 18 +++++++++++-------
 source/_includes/site/hero_unit.html        |  4 ++--
 source/index.html                           |  2 +-
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/sass/homeassistant/homepage/_hero_unit.scss b/sass/homeassistant/homepage/_hero_unit.scss
index e0a6d64c543..400531e805d 100644
--- a/sass/homeassistant/homepage/_hero_unit.scss
+++ b/sass/homeassistant/homepage/_hero_unit.scss
@@ -8,7 +8,7 @@
   padding-bottom: 0;
   margin-top: -88px;
   margin-bottom: 24px;
-  padding-top: 88px; 
+  padding-top: 88px;
   overflow: hidden;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   max-height: 1080px;
@@ -84,7 +84,7 @@
     // animation-duration: 3s;
     // animation-iteration-count: infinite;
     // animation-direction: alternate;
-        
+
     @media only screen and (max-height: 720px) {
       border-bottom: 0;
       margin-bottom: -8px;
@@ -114,7 +114,7 @@
     .lead {
       font-size: 1.15rem;
     }
-    
+
     .hero-buttons a {
       &.primary {
         font-size: 1.25rem;
@@ -123,15 +123,19 @@
   }
 }
 
-@media only screen and (max-width: $palm-end) {
+@media only screen and (max-width: 760px) {
   .hero {
-    
+    .flex {
+      flex-direction: column;
+    }
+
     #HAdemo {
       display: none;
     }
-  
+
     #HAdemoScreenshot {
       display: block;
     }
+
   }
-}
\ No newline at end of file
+}
diff --git a/source/_includes/site/hero_unit.html b/source/_includes/site/hero_unit.html
index 5b5d80367c3..ba3667081ce 100644
--- a/source/_includes/site/hero_unit.html
+++ b/source/_includes/site/hero_unit.html
@@ -1,10 +1,10 @@
 <div class="hero">
   <div class="grid-wrapper">
     <div class="grid flex">
-      <div class="grid__item flex__item three-fifths lap-one-half palm-one-whole">
+      <div class="grid__item flex__item three-fifths lap-one-whole palm-one-whole">
       {% include custom/welcome.html %}
       </div>
-      <div class="grid__item flex__item two-fifths lap-one-half palm-one-whole">
+      <div class="grid__item flex__item two-fifths lap-one-whole palm-one-whole">
         <iframe id="HAdemo" title="Home Assistant Demo"
           src="https://demo.home-assistant.io/?frontpage">
         </iframe>
diff --git a/source/index.html b/source/index.html
index 5dd1f7e63e8..9f7adeae320 100644
--- a/source/index.html
+++ b/source/index.html
@@ -326,7 +326,7 @@ feedback: false
 
 
     <!-- Sponsor section -->
-    
+
     <section class="sponsor">
       <div class="sponsored-by grid__item one-whole">
         <h2>The Home Assistant project is sponsored by</h2>