[bugfix] Fix profile card display issues on smaller screens w/responsive query (#696)

* add responsive media query to profile css

* break username on all screen sizes if necessary

* embed avatar inside header on smaller screen sizes

* align items to the left in small screen view

* more consistent profile scaling accross firefox and chrome

* simplify things a little bit

* make sure bio fits in profile

* word-break content if necessary

Co-authored-by: f0x <f0x@cthu.lu>
This commit is contained in:
tobi 2022-07-13 11:28:05 +02:00 committed by GitHub
commit 1d5c737bbb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 56 additions and 22 deletions

View file

@ -50,9 +50,7 @@ body {
min-height: 100%;
min-width: 100%;
grid-template-columns: 1fr 50% 1fr;
grid-template-columns: auto min(92%, 90ch) auto;
grid-template-rows: auto 1fr auto;
}
@ -269,10 +267,6 @@ footer {
}
@media screen and (orientation: portrait) {
.page {
grid-template-columns: 1fr 92% 1fr;
}
header {
text-align: center;
}