phlaym/moshing-mammut
1
0
Fork 0
Code Issues 5 Pull Requests Projects Releases 8 Activity

Improved layout on smaller devices

Browse Source
This commit is contained in:
Max Nuding 2023-04-14 20:32:49 +02:00
parent 5ab1167d38
commit 52c7922002
Signed by: phlaym
GPG Key ID: A06651BAB6777237
3 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/components/FooterComponent.svelte
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;
}

4
src/routes/+layout.svelte
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>

5
src/routes/+page.svelte
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>