diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
index 04dd31cda1..79dc58a006 100644
--- a/src/components/NcAppNavigation/NcAppNavigation.vue
+++ b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -463,7 +463,7 @@ export default {
 }
 
 // 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 4788a86cc9..f4a8ed0353 100644
--- a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
+++ b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
@@ -391,7 +391,7 @@ $content-inset: calc(3 * var(--default-grid-baseline));
 	box-sizing: border-box;
 }
 
-@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;