Fix the website design on small screens (#253)

aiidateam · Aug 11, 2023 · 6ddb7ce · 6ddb7ce
1 parent 4d94a38
commit 6ddb7ce
Showing 1 changed file with 45 additions and 0 deletions.
diff --git a/aiida-registry-app/src/App.css b/aiida-registry-app/src/App.css
@@ -428,3 +428,48 @@ ul.plugin-info li:before {
 content: "→";
 padding-right: 5px;
 }
+
+@media only screen and (min-width : 150px) and (max-width : 780px)
+  {
+    .globalsummary-box
+      {
+        width:90%;
+        padding:1px;
+        margin: 20px 0px 20px 0px;
+        padding-left: 4px;
+        padding-right: 4px;
+      }
+
+    .globalsummary-box .badge
+      {
+        float: left;
+      }
+    #entrylist h1 {
+      font-size: 25px;
+    }
+
+    .submenu-entry
+      {
+        width:70%;
+        min-height:140px;
+        padding:10px;
+        margin: 10px;
+        padding-left: 40px;
+        padding-right: 40px;
+        overflow: auto;
+      }
+    header
+      {
+        max-width: 100vw;
+      }
+      #details {
+        width: 100%;
+      }
+      #detailsContainer {
+        margin-left: 5px;
+      }
+      .footer
+      {
+        width: calc(100% - 70px) !important;
+      }
+  }