diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
index 837219e4d9..dd1d89efb7 100644
--- a/src/components/NcAppNavigation/NcAppNavigation.vue
+++ b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -419,7 +419,7 @@ function handleEsc(): void {
 }
 
 // When on mobile, we make the navigation slide over the NcAppContent
-@media only screen and (max-width: $breakpoint-mobile) {
+@media only screen and (width < $breakpoint-mobile) {
 	.app-navigation {
 		position: absolute;
 		border-inline-end: 1px solid var(--color-border);
diff --git a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
index a72905ba1d..d9010918ae 100644
--- a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
+++ b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
@@ -388,7 +388,7 @@ $content-inset: calc(3 * var(--default-grid-baseline));
 
 }
 
-@media only screen and (max-width: $breakpoint-mobile) {
+@media only screen and (width < $breakpoint-mobile) {
 	.app-settings:not(.app-settings--legacy) {
 		:deep(.modal-wrapper .modal-container) {
 			padding-inline-start: 12px !important;