Improve layout on large screens

mike76-dev · Dec 11, 2024 · ef59657 · ef59657
1 parent 2658622
commit ef59657
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 24 deletions.
diff --git a/web/src/components/FAQ/FAQ.css b/web/src/components/FAQ/FAQ.css
@@ -1,6 +1,4 @@
 .faq-container {
-    width: 100%;
-    height: 100%;
     padding: 0 1rem;
     position: relative;
 }
@@ -25,6 +23,13 @@
     right: 0;
 }
 
+@media screen and (max-width: 2000px) {
+	.faq-container {
+        width: 100%;
+        height: 100%;
+	}
+}
+
 @media screen and (max-width: 1000px) {
 	.faq-container h1 {
         text-align: center;

diff --git a/web/src/components/HostNavigation/HostNavigation.css b/web/src/components/HostNavigation/HostNavigation.css
@@ -6,6 +6,7 @@
 	flex-wrap: nowrap;
 	margin-top: 1rem;
     margin-bottom: 1rem;
+	max-width: 100vw;
 }
 
 .host-navigation-select {

diff --git a/web/src/components/HostPrices/HostPrices.css b/web/src/components/HostPrices/HostPrices.css
@@ -6,6 +6,7 @@
     margin-top: 2rem;
     margin-left: 1rem;
     position: relative;
+    max-width: 33vw;
 }
 
 .host-prices-title {
@@ -44,9 +45,16 @@
     content: '\025bc';
 }
 
+@media screen and (max-width: 1980px) {
+    .host-prices-container {
+        max-width: 50vw;
+    }
+}
+
 @media screen and (max-width: 1000px) {
     .host-prices-container {
         margin-top: 1rem;
         margin-left: 0;
+        max-width: 100vw;
     }
 }
diff --git a/web/src/components/Hosts/Hosts.css b/web/src/components/Hosts/Hosts.css
@@ -27,6 +27,7 @@
     flex-direction: row;
     margin-top: 0.5rem;
     padding: 1rem 0;
+    justify-content: center;
 }
 
 .hosts-not-found {
@@ -51,6 +52,12 @@
     height: 6vw;
 }
 
+@media screen and (max-width: 2000px) {
+    .hosts-row {
+        justify-content: initial;
+    }
+}
+
 @media screen and (max-width: 1000px) {
     .hosts-container {
         width: 100%;

diff --git a/web/src/components/HostsTable/HostsTable.css b/web/src/components/HostsTable/HostsTable.css
@@ -1,6 +1,9 @@
 .hosts-table-container {
 	max-width: 100%;
 	overflow: auto;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
 }
 
 .hosts-table-container table {
@@ -84,3 +87,9 @@
 .hosts-table-dark .hosts-table-link {
 	color: var(--textDark);
 }
+
+@media screen and (max-width: 2000px) {
+    .hosts-table-container {
+        display: initial;
+    }
+}
diff --git a/web/src/index.css b/web/src/index.css
@@ -15,7 +15,7 @@
 }
 
 html {
-	font-size: 32px;
+	font-size: 16px;
 }
 
 body {
@@ -39,24 +39,3 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
 	monospace;
 }
-
-@media screen and (max-width: 3440px) {
-
-	html {
-		font-size: 28px;
-	}
-}
-
-@media screen and (max-width: 2560px) {
-
-	html {
-		font-size: 20px;
-	}
-}
-
-@media screen and (max-width: 1920px) {
-
-	html {
-		font-size: 16px;
-	}
-}