diff --git a/src/routes/_components/profile/AccountProfile.html b/src/routes/_components/profile/AccountProfile.html index cbb18018..62620190 100644 --- a/src/routes/_components/profile/AccountProfile.html +++ b/src/routes/_components/profile/AccountProfile.html @@ -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; } } diff --git a/src/routes/_components/profile/AccountProfileFollow.html b/src/routes/_components/profile/AccountProfileFollow.html index 2883b7fd..4bfa1716 100644 --- a/src/routes/_components/profile/AccountProfileFollow.html +++ b/src/routes/_components/profile/AccountProfileFollow.html @@ -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; diff --git a/src/routes/_components/profile/AccountProfileHeader.html b/src/routes/_components/profile/AccountProfileHeader.html index 7dcc5308..f074f14a 100644 --- a/src/routes/_components/profile/AccountProfileHeader.html +++ b/src/routes/_components/profile/AccountProfileHeader.html @@ -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; } }