[fix]: responsiveness issues

Stanmancer · Jan 2, 2024 · 526b8d6 · 526b8d6
1 parent e5536ba
commit 526b8d6
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 97 deletions.
diff --git a/100-styles.css b/100-styles.css
@@ -674,6 +674,14 @@ footer a {
         width: 90vw;
     }
 
+    .hero-header h1 {
+        width: 99%;
+    }
+
+    .hero-body {
+        width: 100%;
+    }
+
     .hero-text {
         width: 95%;
     }
@@ -687,6 +695,18 @@ footer a {
         margin: 100px auto;
     }
 
+    .wwd-body {
+        width: 100%;
+    }
+
+    .wwd-icons {
+        /* width: 100%; */
+    }
+
+    .results-body {
+        width: 100%;
+    }
+
     .results-icons {
         width: 460px;
         flex-wrap: wrap;
@@ -755,11 +775,6 @@ footer a {
         gap: 95px;
     }
 
-    .results-section {
-        background-image: linear-gradient(#0000, #0000);
-        background-blend-mode: overlay;
-    }
-
     .results-body {
         width: 80%;
     }
@@ -769,31 +784,12 @@ footer a {
         align-self: center;
     }
 
-    .results-body::after {
-        content: url(images/headphones_hero_2.jpg);
-        position: absolute;
-        width: 915px;
-        /* width: calc(915px / 100vw); */
-        z-index: -1;
-        translate: -550px -200px;
-        overflow-x: hidden;
-    }
-
     .results-icons {
         width: 100%;
         flex-direction: column;
         align-items: center;
     }
 
-    .results-icons::after {
-        content: '';
-        background-image: linear-gradient(#0b2b66fd, 14%, #000);
-        position: absolute;
-        width: 100vw;
-        height: 155%;
-        z-index: -2;
-    }
-
     .footer-container {
         flex-direction: column;
         gap: 45px;

diff --git a/101-styles.css b/101-styles.css
@@ -703,6 +703,14 @@ footer .container {
         width: 90vw;
     }
 
+    .hero-header h1 {
+        width: 99%;
+    }
+
+    .hero-body {
+        width: 100%;
+    }
+
     .hero-text {
         width: 95%;
     }
@@ -716,6 +724,18 @@ footer .container {
         margin: 100px auto;
     }
 
+    .wwd-body {
+        width: 100%;
+    }
+
+    .wwd-icons {
+        /* width: 100%; */
+    }
+
+    .results-body {
+        width: 100%;
+    }
+
     .results-icons {
         width: 460px;
         flex-wrap: wrap;
@@ -784,11 +804,6 @@ footer .container {
         gap: 95px;
     }
 
-    .results-section {
-        background-image: linear-gradient(#0000, #0000);
-        background-blend-mode: overlay;
-    }
-
     .results-body {
         width: 80%;
     }
@@ -798,31 +813,12 @@ footer .container {
         align-self: center;
     }
 
-    .results-body::after {
-        content: url(images/headphones_hero_2.jpg);
-        position: absolute;
-        width: 915px;
-        /* width: calc(915px / 100vw); */
-        z-index: -1;
-        translate: -550px -200px;
-        overflow-x: hidden;
-    }
-
     .results-icons {
         width: 100%;
         flex-direction: column;
         align-items: center;
     }
 
-    .results-icons::after {
-        content: '';
-        background-image: linear-gradient(#0b2b66fd, 14%, #000);
-        position: absolute;
-        width: 100vw;
-        height: 155%;
-        z-index: -2;
-    }
-
     .footer-container {
         flex-direction: column;
         gap: 45px;

diff --git a/3-styles.css b/3-styles.css
@@ -617,14 +617,24 @@ header {
 
 @media screen and (max-width: 800px) {
 
-    section {
+    section,
+    footer {
         width: 100vw;
     }
 
+    footer .container,
     .container {
         width: 90vw;
     }
 
+    .hero-header h1 {
+        width: 99%;
+    }
+
+    .hero-body {
+        width: 100%;
+    }
+
     .hero-text {
         width: 95%;
     }
@@ -638,6 +648,18 @@ header {
         margin: 100px auto;
     }
 
+    .wwd-body {
+        width: 100%;
+    }
+
+    .wwd-icons {
+        /* width: 100%; */
+    }
+
+    .results-body {
+        width: 100%;
+    }
+
     .results-icons {
         width: 460px;
         flex-wrap: wrap;
@@ -706,11 +728,6 @@ header {
         gap: 95px;
     }
 
-    .results-section {
-        background-image: linear-gradient(#0000, #0000);
-        background-blend-mode: overlay;
-    }
-
     .results-body {
         width: 80%;
     }
@@ -720,28 +737,9 @@ header {
         align-self: center;
     }
 
-    .results-body::after {
-        content: url(images/headphones_hero_2.jpg);
-        position: absolute;
-        width: 915px;
-        /* width: calc(915px / 100vw); */
-        z-index: -1;
-        translate: -550px -200px;
-        overflow-x: hidden;
-    }
-
     .results-icons {
         width: 100%;
         flex-direction: column;
         align-items: center;
     }
-
-    .results-icons::after {
-        content: '';
-        background-image: linear-gradient(#0b2b66fd, 14%, #000);
-        position: absolute;
-        width: 100vw;
-        height: 155%;
-        z-index: -2;
-    }
 }
diff --git a/4-styles.css b/4-styles.css
@@ -672,6 +672,14 @@ footer a {
         width: 90vw;
     }
 
+    .hero-header h1 {
+        width: 99%;
+    }
+
+    .hero-body {
+        width: 100%;
+    }
+
     .hero-text {
         width: 95%;
     }
@@ -685,6 +693,18 @@ footer a {
         margin: 100px auto;
     }
 
+    .wwd-body {
+        width: 100%;
+    }
+
+    .wwd-icons {
+        /* width: 100%; */
+    }
+
+    .results-body {
+        width: 100%;
+    }
+
     .results-icons {
         width: 460px;
         flex-wrap: wrap;
@@ -753,11 +773,6 @@ footer a {
         gap: 95px;
     }
 
-    .results-section {
-        background-image: linear-gradient(#0000, #0000);
-        background-blend-mode: overlay;
-    }
-
     .results-body {
         width: 80%;
     }
@@ -767,31 +782,12 @@ footer a {
         align-self: center;
     }
 
-    .results-body::after {
-        content: url(images/headphones_hero_2.jpg);
-        position: absolute;
-        width: 915px;
-        /* width: calc(915px / 100vw); */
-        z-index: -1;
-        translate: -550px -200px;
-        overflow-x: hidden;
-    }
-
     .results-icons {
         width: 100%;
         flex-direction: column;
         align-items: center;
     }
 
-    .results-icons::after {
-        content: '';
-        background-image: linear-gradient(#0b2b66fd, 14%, #000);
-        position: absolute;
-        width: 100vw;
-        height: 155%;
-        z-index: -2;
-    }
-
     .footer-container {
         flex-direction: column;
         gap: 45px;