From 37cb3b8320de63db50d1ce39e2f1279e4b15c14e Mon Sep 17 00:00:00 2001 From: Addy Osmani Date: Tue, 19 Dec 2023 02:21:36 -0800 Subject: [PATCH] Fix responsiveness, movies --- index.html | 67 +++++++++++++++++++++++++++++++----------------------- 1 file changed, 39 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index f9fe25f..099d30e 100644 --- a/index.html +++ b/index.html @@ -159,27 +159,9 @@ margin-top: 0 } - @media (max-width: 900px) { - .grid-container { - grid-template-columns: 1fr; - grid-template-rows: auto auto; - } - .black-column { - height: auto; - } - .content-black { - width: auto; - padding-left: 20px; - padding-right: 20px; - } - .white-column { - padding-top: 0; - overflow-y: initial; - } - } .jsdp-section-header-title span { background: linear-gradient(180deg, #fff 22.5%, rgba(255, 255, 255, .7) 100%); @@ -225,12 +207,11 @@ } .info-box { - display: block; + display: none; width: 80%; height: 400px; background-color: #0a0118; border-radius: 16px; - display: flex; flex-direction: column; border: 1px solid #5B5668; flex-grow: 1; @@ -329,6 +310,37 @@ margin-left: 5px; /* Add spacing between the icon and the link text */ } + + + @media (max-width: 900px) { + .grid-container { + grid-template-columns: 1fr; + grid-template-rows: auto auto; + } + + .black-column { + height: auto; + } + + .content-black { + width: auto; + padding-left: 20px; + padding-right: 20px; + } + + .white-column { + padding-top: 0; + overflow-y: initial; + } + + } + + @media (min-width: 1100px) { + .info-box { + display: flex; + } + } + @@ -874,25 +886,24 @@

Chapter 13: Next.js Rendering Patterns

Community implementations