Improved layout on smaller devices

This commit is contained in:
Max Nuding 2023-04-14 20:32:49 +02:00
parent 5ab1167d38
commit aac325ce69
Signed by: phlaym
GPG Key ID: A06651BAB6777237
3 changed files with 8 additions and 7 deletions

View File

@ -58,7 +58,7 @@
background-color: var(--color-grey-translucent);
}
}
@media only screen and (max-device-width: 620px) {
@media only screen and (max-width: 620px) {
.mastodonInstance,
.feedSuffix {
display: none;
@ -68,7 +68,7 @@
}
}
@media only screen and (max-device-width: 430px) {
@media only screen and (max-width: 430px) {
.mastodonInstance,
.feedSuffix,
.secretIngredient {
@ -76,7 +76,7 @@
}
}
@media only screen and (max-device-width: 370px) {
@media only screen and (max-width: 370px) {
.label {
display: none;
}

View File

@ -34,9 +34,9 @@
align-items: center;
gap: 10px;
}
@media only screen and (max-device-width: 620px) {
@media only screen and (max-width: 620px) {
.footer {
width: calc(100% + 16px);
width: 100%;
}
}
</style>

View File

@ -202,9 +202,10 @@
z-index: 100;
}
@media only screen and (max-device-width: 650px) {
@media only screen and (max-width: 650px) {
.post {
max-width: 100vw;
max-width: calc(100vw - 16px);
padding: 1em 0;
}
}
</style>