fix: responsive UI issues for content width

AlexJSully · Jan 30, 2024 · 5e34db0 · 5e34db0
1 parent 7f1eb20
commit 5e34db0
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/src/style.css b/src/style.css
@@ -23,6 +23,7 @@ img {
 	margin: auto;
 	text-align: left;
 	width: 1050px;
+	max-width: 100%;
 }
 /** END wrapper **/
 
@@ -154,13 +155,20 @@ img {
 
 /** BEGIN content **/
 #content {
-    border: 1px solid rgb(175, 175, 175)(128, 128, 128, 0.568);
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-    clear: both;
-    float: left;
-    font-family: Arial;
-    width: 676px;
+	border: 1px solid rgb(175, 175, 175) (128, 128, 128, 0.568);
+	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+	clear: both;
+	float: left;
+	font-family: Arial;
+	width: 676px;
+}
+
+@media screen and (max-width: 1035px) {
+	#content {
+		width: 100%;
+	}
 }
+
 #content .foot {
 	padding: 25px 8px;
 }
@@ -440,6 +448,13 @@ img {
 	width: 330px;
 }
 
+@media screen and (max-width: 1035px) {
+	#sidebar {
+		margin-top: 1%;
+		width: 100%;
+	}
+}
+
 #sidebar .box {
 	border: 2px solid #e1e1e1;
 	margin-bottom: 15px;

diff --git a/src/style.min.css b/src/style.min.css