Improved layout on smaller devices

2023-04-14 20:32:49 +02:00
parent 5ab1167d38
commit 52c7922002
3 changed files with 8 additions and 7 deletions
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -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>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -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>