Merge pull request #295 from frazie/alterations

added media queries and changed span toggle margin error
KendallDoesCoding · Jun 15, 2022 · e040311 · e040311
2 parents 96d6170 + 63ae7c4
commit e040311
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -36,7 +36,7 @@ <h1 class="heading">A very Mogul Christmas</h1>
          <div id="switch">
             <label class="switch">
             <input type="checkbox">
-            <span class="slider round"></span>
+            <span class="switch slider round"></span>
             </label>
          </div>
       </div>

diff --git a/styles.css b/styles.css
@@ -362,7 +362,7 @@ a:active {
 }
 
 #header {
-  position: "relative";
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -547,3 +547,73 @@ a:active {
 #report {
   color: red;
 }
+
+/* media queries */
+@media screen and (min-width: 1024px) {
+  body {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+/* For Tablet View */
+@media screen and (min-device-width: 768px)
+and (max-device-width: 1024px) {
+  body {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+/* For Mobile Portrait View */
+@media screen and (max-device-width: 480px)
+and (orientation: portrait) {
+  body {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+/* For Mobile Landscape View */
+@media screen and (max-device-width: 640px)
+and (orientation: landscape) {
+  body {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+/* For Mobile Phones Portrait or Landscape View */
+@media screen and (max-device-width: 640px) {
+  body {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+/* For iPhone 4 Portrait or Landscape View */
+@media screen and (min-device-width: 320px)
+and (-webkit-min-device-pixel-ratio: 2) {
+  body {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+/* For iPhone 5 Portrait or Landscape View */
+@media (device-height: 568px) and (device-width: 320px)
+and (-webkit-min-device-pixel-ratio: 2) {
+  body {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+/* For iPhone 6 and 6 plus Portrait or Landscape View */
+@media (min-device-height: 667px) and (min-device-width: 375px)
+and (-webkit-min-device-pixel-ratio: 3) {
+  body {
+    width: 100%;
+    height: 100%;
+  }
+}