mobile breakpoints

duckduckgo · Oct 29, 2024 · 1ecf5bb · 1ecf5bb
1 parent f64dcd1
commit 1ecf5bb
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 20 deletions.
diff --git a/special-pages/pages/duckplayer/app/components/MobileApp.module.css b/special-pages/pages/duckplayer/app/components/MobileApp.module.css
@@ -1,6 +1,5 @@
 body[data-display="app"] {
     padding: 8px;
-    /*background: black;*/
 }
 html[data-focus-mode="on"]:root .main {
     --bg-color: transparent;
@@ -109,8 +108,6 @@ body:has([data-state="completed"] [aria-checked="true"]) .switch {
 .switch {
     grid-area: switch;
     height: 44px;
-    /*background: rgba(255, 255, 255, 0.03);*/
-    /*border-radius: 16px;*/
 }
 
 @media screen and (min-width: 425px) and (max-height: 600px) {
@@ -163,8 +160,8 @@ body:has([data-state="completed"] [aria-checked="true"]) .switch {
         background: var(--bg-color);
         border-radius: unset;
         display: grid;
-        padding-top: 12px;
-        padding-bottom: 12px;
+        padding-top: 8px;
+        padding-bottom: 8px;
         height: 100%;
     }
     .buttons {
@@ -221,7 +218,4 @@ body:has([data-state="completed"] [aria-checked="true"]) .switch {
     .switch {
         justify-content: end;
     }
-    .switch > * {
-        min-width: 400px
-    }
 }
diff --git a/special-pages/pages/duckplayer/app/components/SwitchBarMobile.module.css b/special-pages/pages/duckplayer/app/components/SwitchBarMobile.module.css
@@ -7,17 +7,6 @@
     line-height: 1.1;
 }
 
-/*@media screen and (min-width: 900px) {*/
-/*    .switchBar {*/
-/*        border-radius: 8px;*/
-/*    }*/
-/*}*/
-/*@media screen and (min-width: 667px) and (max-height: 450px) {*/
-/*    .switchBar {*/
-/*        border-radius: 8px;*/
-/*    }*/
-/*}*/
-
 .stateExiting {
     transition: all .3s ease-in-out;
     transition-delay: 2s;

diff --git a/special-pages/pages/duckplayer/app/components/Wordmark-mobile.module.css b/special-pages/pages/duckplayer/app/components/Wordmark-mobile.module.css
@@ -6,7 +6,8 @@
     grid-column-gap: 8px;
     grid-template-columns: max-content max-content;
 }
-@media screen and (max-width: 500px) {
+
+@media screen and (max-width: 767px) {
     .logo {
         height: 100px;
     }