From 9ac0b57d881de5c76ed7550a1e29d19c293f04fa Mon Sep 17 00:00:00 2001 From: Stefan Kondring Date: Thu, 22 Sep 2022 09:06:00 +0200 Subject: [PATCH] add responsiveness for larger screens --- components/card.css | 10 ++++++++-- components/header.css | 9 ++++++++- components/nav.css | 6 ++++++ index.html | 41 +++++++++++++++++++++++++++++++++++++---- style.css | 14 +++++++++++++- 5 files changed, 72 insertions(+), 8 deletions(-) diff --git a/components/card.css b/components/card.css index efa8233..45bd9a3 100644 --- a/components/card.css +++ b/components/card.css @@ -1,6 +1,6 @@ .card { position: relative; - width: 80%; + width: 320px; margin: 30px auto; border: 1px solid black; border-radius: 10px; @@ -14,10 +14,16 @@ animation: shake-animation 0.3s; } */ -.card:last-of-type { +.card:nth-last-of-type(1) { margin-bottom: 100px; } +@media (min-width: 1000px) { + .card:nth-last-of-type(2) { + margin-bottom: 100px; + } +} + .card__question { text-align: center; padding: 5px; diff --git a/components/header.css b/components/header.css index d1b6af4..2147743 100644 --- a/components/header.css +++ b/components/header.css @@ -1,11 +1,18 @@ header { + margin: 0 auto; background-color: var(--primary-color); - position: sticky; border-radius: 10px; z-index: 5; + width: 400px; } h1 { text-align: center; padding: 10px; +} + +@media (min-width: 1000px){ + header { + width: 100%; + } } \ No newline at end of file diff --git a/components/nav.css b/components/nav.css index 4bd229b..f7ba974 100644 --- a/components/nav.css +++ b/components/nav.css @@ -10,6 +10,12 @@ border-radius: 10px; } +@media (min-width: 1000px) { + .nav-list { + width: 800px; + } +} + .nav-list > li { padding: 10px; transition: 0.5s ease; diff --git a/index.html b/index.html index 86c3b1d..e7e8b2b 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ -
+

Quiz App

@@ -16,7 +16,7 @@

Quiz App

-
+

What property flips the axes in flexbox?

@@ -28,7 +28,40 @@

What property flips the axes in flexbox?

-
+
+

What property flips the axes in flexbox?

+
+ +
    +
  • #html
    • +
  • #css
    • +
  • #flexbox
    • +
+ +
+
+

What property flips the axes in flexbox?

+
+ +
    +
  • #html
    • +
  • #css
    • +
  • #flexbox
    • +
+ +
+
+

What property flips the axes in flexbox?

+
+ +
    +
  • #html
    • +
  • #css
    • +
  • #flexbox
    • +
+ +
+
- + \ No newline at end of file diff --git a/style.css b/style.css index 258c046..c368752 100644 --- a/style.css +++ b/style.css @@ -19,8 +19,20 @@ body { } .app-container { - width: 400px; margin: auto; + display: flex; + flex-wrap: wrap; + justify-content: start; + z-index: -1; } +.all-container { + width: 400px; + margin: auto; +} +@media (min-width: 1000px){ + .all-container { + width: 800px; + } +} \ No newline at end of file