responsive-design angepasst.

Lyuris1995 · Nov 2, 2023 · 6646657 · 6646657
1 parent 14fd1ba
commit 6646657
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/gamescouter_test/index.html b/gamescouter_test/index.html
@@ -10,7 +10,7 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
   </head>
   <body>
-    <div class="container-fluid "><!--fixed-top-->
+    <div class="container-fluid ">
       <nav class="navbar navbar-expand-lg bg-body-tertiary">
         <div class="container-fluid">
           <a class="navbar-brand" href="#"><img src="src/assets/gamescouter-logo.png" alt="Gamescouter Logo" id="gamescouterLogo"/></a>

diff --git a/gamescouter_test/src/style.less b/gamescouter_test/src/style.less
@@ -153,6 +153,7 @@ body, html {
                 opacity: 0;
                 pointer-events: none;
                 transition: 0.3s ease-in-out;
+                user-select: text;
 
                 &.active {
                     opacity: 1;
@@ -208,10 +209,14 @@ body, html {
                     border: 2px solid @BrandColor;
                     border-radius: 13px;
                     opacity: 0;
-                    width: 350px;
+                    width: 250px;
                     pointer-events: none;
                     transition: 0.3s ease-in-out;
-
+
+                    @media screen and (min-width: 450px) {
+                        width: 450px;
+                    }
+
                     &.active {
                         opacity: 1;
                         pointer-events: all;
@@ -249,11 +254,13 @@ body, html {
                             display: flex;
                             list-style-type: none;
                             opacity: 0;
-                            width: 100px;
+                            width: 80px;
                             pointer-events: none;
                             transition: 0.3s ease-in-out;
                             white-space: break-spaces;
-
+                            @media screen and (min-width: 450px) {
+                                width: 150px;
+                            }
 
                             &.active {
                                 opacity: 1;
@@ -280,6 +287,11 @@ body, html {
                         }
                     }
                 }
+
+                @media screen and (max-height: 700px) {
+                    margin-top: 50px;
+                    padding: 0px;
+                }
             }
     }
 }