From 73f138139677adef06df1fc27933174a967b9132 Mon Sep 17 00:00:00 2001
From: Andre Pires <andreeepiresss1@gmail.com>
Date: Sat, 30 Aug 2025 16:24:13 +0100
Subject: [PATCH] Solved lab

---
 styles/style.css | 76 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)

diff --git a/styles/style.css b/styles/style.css
index 9571ab1..a133e2a 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -177,3 +177,79 @@ header {
 }
   
 /* Write your CSS below */
+
+
+@media all and (max-width: 760px){
+  .navbar{
+    flex-direction:column;
+    display: flex;
+    justify-content: center;
+    li { /*make the buttons larger for the entire width of the screen*/
+      width: 100%;
+      border: 1px solid white;
+    };
+  }
+  
+  .main-article{
+    flex-direction:column;  /*all the elements insde the the main article in columnm*/
+    align-items: center; /*elements in the center*/
+    
+    .image, .content{   /*size of element inside of the box*/
+      width:auto;
+    }
+    .image{      /*size*/
+      padding-bottom: 20px;
+    }
+  }
+
+  .articles-container{
+    flex-direction:column;
+    gap: 20px;
+
+    .article{
+      width:auto;
+    }
+  }
+}
+
+
+@media all and (min-width: 760px) and (max-width: 1024px){
+  .navbar {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+  }
+  .navbar li{
+    flex: 1;                   /* each link takes equal width */
+  }
+
+  .article{
+    min-width: 45%;
+    margin-bottom: 2rem;
+  }
+}
+
+
+
+
+  
+@media all and (max-width: 480px){
+  .navbar{
+    display: none;
+  }
+  header::after {
+    content: url("../images/menu-icon.png");
+    
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    width: 100%;
+    height: 40px;
+
+    color: white;
+    background-color: #333;
+
+    position: relative;
+  }
+}
\ No newline at end of file