From 75c4af7130ab166a4c01b61fb1eabbeccb31356e Mon Sep 17 00:00:00 2001 From: SkyratBot <59378654+SkyratBot@users.noreply.github.com> Date: Sat, 10 Apr 2021 18:59:22 +0200 Subject: [PATCH] [MIRROR] Adjust stat panel grid item widths and breakpoints (#4793) * Adjust stat panel grid item widths and breakpoints (#58295) * Adjust stat panel grid item widths and breakpoints * Update statbrowser.html Co-authored-by: celotajstg Co-authored-by: Aleksej Komarov * Adjust stat panel grid item widths and breakpoints Co-authored-by: celotajstg <81999976+celotajstg@users.noreply.github.com> Co-authored-by: celotajstg Co-authored-by: Aleksej Komarov --- html/statbrowser.html | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/html/statbrowser.html b/html/statbrowser.html index 9573bd6686f..d7c9dcec947 100644 --- a/html/statbrowser.html +++ b/html/statbrowser.html @@ -146,23 +146,34 @@ .grid-item { position: relative; display: inline-block; - width: 150px; + width: 100%; + box-sizing: border-box; + overflow: visible; padding: 3px 2px; text-decoration: none; - overflow: visible; } - @media only screen and (min-width: 720px) { + @media only screen and (min-width: 300px) { .grid-item { - width: 25%; - box-sizing: border-box; + width: 50%; } } - @media only screen and (min-width: 800px) { + @media only screen and (min-width: 430px) { + .grid-item { + width: 33%; + } + } + + @media only screen and (min-width: 560px) { + .grid-item { + width: 25%; + } + } + + @media only screen and (min-width: 770px) { .grid-item { width: 20%; - box-sizing: border-box; } }