From 132cba741cd0769e5f26f16da4113703d77c07e4 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.ai>
Date: Tue, 25 Jan 2022 15:43:07 +0100
Subject: [PATCH] docs: add media query to control for smaller sizes.

---
 website/src/css/custom.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index e69f47e465..86012dd275 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -79,19 +79,19 @@ html[data-theme='dark'] .header-github-link:before {
 
 .unleash-video-container {
     display: grid;
-    /* when it is wider than 400px */
-    grid-template-columns: 1fr min(250px, 25%);
-
-    /* otherwise no template-columns. Use a single column. */
-
     --gap: .5em;
     --border-radius: var(--ifm-alert-border-radius);
     gap: var(--gap);
     margin-bottom: 1em;
 }
 
-.unleash-video-container p {
+@media screen and (min-width: 450px) {
+    .unleash-video-container {
+        grid-template-columns: 1fr min(250px, 25%);
+    }
+}
 
+.unleash-video-container p {
     background: var(--ifm-color-success-contrast-background);
     border-radius: var(--border-radius);
 }