More responsive design

Author: vdsabev

index.html

@@ -73,7 +73,7 @@
     </section>
 
     <section>
-      <h2 id="why">Why?</h2>
+      <h2 id="why">Why you might want this</h2>
 
       <p>
         Sometimes your website needs a simple code editor that is easier on the
@@ -127,7 +127,7 @@ <h2 id="try">Try</h2>
         <li>This website - yes, go play with the <a href="#editor">editor</a> if you haven't yet!</li>
       </ul>
 
-      <h2 id="diy">Want to add this to your website?</h2>
+      <h2 id="diy">Want to add it to your website?</h2>
       <p>
         Download
         <a href="codebedder.js" target="_blank">codebedder.js</a>,

style.css

@@ -203,7 +203,7 @@ nav a {
 
 section:has(code-bedder) {
   display: grid;
-  grid-auto-rows: 33vh;
+  grid-auto-rows: calc(45.5vh - 8vw);
 }
 
 iframe {
@@ -216,6 +216,7 @@ iframe {
 
 @media (min-width: 960px) {
   section:has(code-bedder) {
+    min-height: 75vh;
     grid-auto-rows: initial;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   }
@@ -225,6 +226,12 @@ iframe {
   }
 }
 
+@media (min-width: 1280px) {
+  section:has(code-bedder) {
+    min-height: 57vh;
+  }
+}
+
 section:not(:has(code-bedder)) {
   max-width: 1028px;
   width: 100%;