diff --git a/components/nav/NavSide.vue b/components/nav/NavSide.vue
index d60aae6f..4e6e5bc5 100644
--- a/components/nav/NavSide.vue
+++ b/components/nav/NavSide.vue
@@ -42,7 +42,7 @@ const { notifications } = useNotifications()
   .spacer {
     margin-top: 0.5em;
   }
-  @media screen and ( max-height: 820px ) {
+  @media screen and ( max-height: 820px ) and ( min-width: 640px ) {
     .spacer {
       margin-top: 0;
     }
diff --git a/components/nav/NavSideItem.vue b/components/nav/NavSideItem.vue
index 6b5724ec..7463c7ae 100644
--- a/components/nav/NavSideItem.vue
+++ b/components/nav/NavSideItem.vue
@@ -79,13 +79,19 @@ const noUserVisual = computed(() => isHydrated.value && props.userOnly && !curre
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
-  @media screen and ( max-height: 820px ) {
+  @media screen and ( max-height: 820px ) and ( min-width: 1280px ) {
     .item {
       padding-top: 0.25rem;
       padding-bottom: 0.25rem;
     }
   }
-  @media screen and ( max-height: 720px ) {
+  @media screen and ( max-height: 720px ) and ( min-width: 640px ) {
+    .item {
+      padding-top: 0.35rem;
+      padding-bottom: 0.35rem;
+    }
+  }
+  @media screen and ( max-height: 720px ) and ( min-width: 1280px ) {
     .item {
       padding-top: 0.05rem;
       padding-bottom: 0.05rem;