From 0bd226b0516332639d8364fea3ad02a2721f7e78 Mon Sep 17 00:00:00 2001
From: Cyril MARPAUD <cyril.marpaud@bashroom.com>
Date: Sun, 12 Mar 2023 14:33:09 +0100
Subject: [PATCH] fix: handle responsive issues on minuscule screens
---
static/style.css | 15 ++++++++++-----
1 file changed, 10 insertions(+), 5 deletions(-)
diff --git a/static/style.css b/static/style.css
index bdae489..d659b3c 100644
--- a/static/style.css
+++ b/static/style.css
@@ -37,6 +37,8 @@ body {
}
#splash {
+ max-width: 100vw;
+ overflow: hidden;
color: white;
text-align: center;
margin: auto;
@@ -138,10 +140,12 @@ body {
}
.card {
+ overflow: auto;
margin: auto;
padding: 1.5em;
- min-width: 30%;
- max-width: 60%;
+ min-width: 30vw;
+ max-width: 60vw;
+ max-height: 75vh;
color: white;
text-align: justify;
@@ -188,11 +192,11 @@ body {
}
.columns {
+ overflow: auto;
display: flex;
flex-direction: row;
- justify-content: space-around;
+ justify-content: space-between;
align-items: center;
- align-content: space-around;
}
.columns div {
@@ -209,8 +213,9 @@ body {
}
.list {
+ overflow: auto;
display: flex;
- justify-content: center;
+ justify-content: space-between;
align-items: center;
margin-bottom: 3%;
}