From b5744d1e0d0a323ff2819c8ee76f80728b433c94 Mon Sep 17 00:00:00 2001 From: Kumi Date: Sun, 18 Aug 2024 08:49:35 +0200 Subject: [PATCH] fix(css): replace width with max-width for better layout Switched multiple instances of `width: 100%` to `max-width: 100%` in the CSS. This adjustment prevents elements from stretching beyond their container's bounds, improving the overall responsiveness and visual presentation of the layout. Helps ensure better alignment and avoids potential overflow issues on smaller screens. --- src/wikimore/static/css/style.css | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/src/wikimore/static/css/style.css b/src/wikimore/static/css/style.css index 45e2fad..819f321 100644 --- a/src/wikimore/static/css/style.css +++ b/src/wikimore/static/css/style.css @@ -94,7 +94,7 @@ h1 { box-sizing: border-box; display: flex; flex-direction: column; - width: 100%; + max-width: 100%; margin: 10px 0; } @@ -128,7 +128,6 @@ h1 { margin: 1em auto; font-size: small; border-collapse: collapse; - width: 100%; max-width: 100%; background-color: #f9f9f9; border: 1px solid #ddd; @@ -298,7 +297,7 @@ h1 { padding: 10px; font-size: small; border-collapse: collapse; - width: 100%; + max-width: 100%; margin: 10px 0; display: flex; flex-direction: column; @@ -385,7 +384,7 @@ figure, background-color: #f9f9f9; border: 1px solid #ddd; display: inline-block; - width: 100%; + max-width: 100%; display: block; margin: 10px 0; overflow-x: auto; @@ -464,25 +463,25 @@ span { } .sidebar { - width: 100%; + max-width: 100%; margin: 10px 0; float: none; } .table { - width: 100%; + max-width: 100%; overflow-x: auto; } .infobox { - width: 100%; + max-width: 100%; margin: 10px 0; float: none; } figure, .tmulti { - width: 100%; + max-width: 100%; display: block; margin: 10px 0; } @@ -513,7 +512,7 @@ span { } .sidebar { - width: 100%; + max-width: 100%; margin: 5px 0; } @@ -523,13 +522,13 @@ span { } .infobox { - width: 100%; + max-width: 100%; margin: 5px 0; } figure, .tmulti { - width: 100%; + max-width: 100%; margin: 5px 0; } }