Add media query to ensure Shop Page styles are responsive for tablet …

…screens: increased width % of shop headings, adjust headings margins, adjust margin values of expand/collapse list
k-nadia · Jun 28, 2024 · b4077a7 · b4077a7
1 parent 9defbf9
commit b4077a7
Showing 1 changed file with 17 additions and 0 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -424,6 +424,23 @@ main {
      #menu a:hover {
         background-color: #e0882660;
     }
+
+    .shop-headings {
+        font-family: "Barlow Condensed", sans-serif;
+        font-weight: 500;
+        font-size: 1.5em;
+        text-align: center;
+        letter-spacing: 0.5px;
+        text-transform: uppercase;
+        margin: 5px 50px;
+        padding-left: 0.5em;
+        width: 40%;
+    }
+
+    .m-d.expand-list {
+        margin: 0 9%;
+        padding: 0;
+    }
 }
 
 /* MEDIA QUERY - LAPTOPS & DESKTOPS (992px and larger)