diff options
authorTamás Zolnai <>2020-03-19 17:37:04 +0100
committerAndras Timar <>2020-03-20 15:05:22 +0100
commit97988f7c7b84081c9316146745ca5d3008727f01 (patch)
parent0b40d94dc23f2a1c5b2e763674c166bea9dfec6c (diff)
Restore cypress test framework's mobile tests.
Broken since: b62dcc025555076a7522809b9f12f873c278205d The issue here cypress sets the window size and not the device size when tries to emulate mobile view. For now, let's keep window size media rules too. [tml: Window size changes depending on orientation. Device size does not. We need to change each rule that used only max-device-width into one using two subrules using max-width combined with comma (i.e. the OR operator), one for portrait using 767px as the limit, one for landscape using 1023px as the limit.] We do this in other places of the css code anyway. In a long term, it would be good to find a better way to emulate mobile view by cypress or to detect mobile from JS code, so we can enable mobile mode easily for cypress tests. Change-Id: Ic7974f44fcbf6ed2883e93acd28153709514c216
2 files changed, 2 insertions, 2 deletions
diff --git a/loleaflet/css/loleaflet.css b/loleaflet/css/loleaflet.css
index 334b721ee..2016bc131 100644
--- a/loleaflet/css/loleaflet.css
+++ b/loleaflet/css/loleaflet.css
@@ -178,7 +178,7 @@ body {
#toolbar-hamburger {
width: 0;
-@media (max-device-width: 767px) {
+@media (max-width: 767px) and (orientation: portrait), (max-width: 1023px) and (orientation: landscape) {
#toolbar-hamburger {
width: 36px;
diff --git a/loleaflet/css/mobilewizard.css b/loleaflet/css/mobilewizard.css
index eb4d613fa..0dde3030a 100644
--- a/loleaflet/css/mobilewizard.css
+++ b/loleaflet/css/mobilewizard.css
@@ -1,4 +1,4 @@
-@media (max-device-width: 767px) {
+@media (max-width: 767px) and (orientation: portrait), (max-width: 1023px) and (orientation: landscape) {
.menuwizard .menu-entry-icon{
padding-left: 4%;