Improve username space on smaller screens

This commit is contained in:
Nick Colley 2023-02-02 12:32:12 +00:00
parent 32821a2471
commit 2ca39f8aa8
3 changed files with 14 additions and 22 deletions

View File

@ -83,20 +83,15 @@
}
}
@media (max-width: 340px) {
@media (max-width: 400px) {
.account-profile-grid {
grid-template-areas: "avatar avatar"
"avatar avatar"
"name name"
"username username"
"label label"
"followed-by followed-by"
"follow follow"
"note note"
"meta meta"
"details details";
grid-template-columns: min-content 1fr;
grid-column-gap: 5px;
grid-template-areas: "avatar name name label"
"avatar username username username"
"followed-by followed-by follow follow"
"note note note note"
"meta meta meta meta"
"details details details details";
grid-template-columns: min-content 1fr min-content min-content;
}
}

View File

@ -31,12 +31,6 @@
gap: 5px;
}
@media (max-width: 340px) {
.account-profile-follow {
justify-self: flex-end;
}
}
:global(.account-profile-more-options-button),
.account-profile-follow-button {
padding: 10px;

View File

@ -103,12 +103,15 @@
@media (max-width: 767px) {
.account-profile-name {
font-size: 1.3em;
/* font-size: 1.3em; */
}
.account-profile-username {
font-size: 1.1em;
/* font-size: 1.1em; */
}
.account-profile-name, .account-profile-username {
.account-profile-name {
align-self: flex-end;
}
.account-profile-username {
align-self: flex-start;
}
}