From 78d81fbce286730dac4ed7b45adb6b4c0de7023e Mon Sep 17 00:00:00 2001 From: Maria sophia Mascardo Date: Mon, 18 Nov 2024 21:10:10 +0100 Subject: [PATCH] done --- styles/style.css | 94 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) diff --git a/styles/style.css b/styles/style.css index 9571ab1..17050ba 100644 --- a/styles/style.css +++ b/styles/style.css @@ -177,3 +177,97 @@ header { } /* Write your CSS below */ +@media(max-width:760px) { + .navbar { + list-style-type: none; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + } + .navbar li { + width: 100vw; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + border-bottom: 1px solid #ffffff; + border-right: none; + } + .articles-container { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + flex-direction: column; + align-items: center; + padding: 20px; + } + .article { + width: 100%; + padding: 20px; + border: 1px solid #ccc; + margin-bottom: 30px; + } + + .articles-container { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + flex-direction: row; + align-items: center; + padding: 20px; + } + .main-article { + margin: 20px; + padding: 20px; + border: 1px solid #ccc; + display: flex; + flex-direction: column; + align-items: center; + flex-wrap: wrap; + } + .main-article .content { + width: 100%; + padding: 0 20px; + height: auto; + } + .main-article .image { + width: 100%; + padding: 0 20px; + height: auto; + } + +} + +@media (min-width:760px) and (max-width:1024px){ + .navbar { + list-style-type: none; + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + } + .navbar li { + width: 100vw; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + border-bottom: 1px solid #ffffff; + border-right: 1px solid; + } + .articles-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 50px + } + + .article { + width: 100%; + padding: 20px; + border: 1px solid #ccc; + + } +} + +