diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css index c8554d2cde..6ad915844f 100644 --- a/platform/commonUI/general/res/css/items.css +++ b/platform/commonUI/general/res/css/items.css @@ -357,7 +357,7 @@ .items-holder .item.grid-item { width: 100%; height: 100px; } } -@media screen and (min-device-width: 801px) and (min-device-height: 1025px) { +@media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 801px) and (min-device-width: 1025px) and (orientation: landscape) { /* line 24, ../sass/mobile/_item.scss */ .items-holder .item.grid-item { width: 200px; diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 22c31be4de..da94f6e1ab 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -816,7 +816,7 @@ mct-container { /* line 81, ../sass/mobile/_layout.scss */ .mobile-menu-icon { top: 5px; } - @media screen and (min-device-width: 801px) and (min-device-height: 1025px) { + @media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 801px) and (min-device-width: 1025px) and (orientation: landscape) { /* line 81, ../sass/mobile/_layout.scss */ .mobile-menu-icon { display: none; } } @@ -829,7 +829,7 @@ mct-container { /* line 88, ../sass/mobile/_layout.scss */ .browse-manage { width: 400px; } } -@media screen and (min-device-width: 801px) and (min-device-height: 1025px) { +@media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 801px) and (min-device-width: 1025px) and (orientation: landscape) { /* line 88, ../sass/mobile/_layout.scss */ .browse-manage { min-width: 150px; diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss index 19d4da8436..cdaa5c1836 100644 --- a/platform/commonUI/general/res/sass/mobile/_constants.scss +++ b/platform/commonUI/general/res/sass/mobile/_constants.scss @@ -42,13 +42,25 @@ $tabHeiLanCheck: "(min-device-width: #{$tabMinH}) and (max-device-width: #{$tabM $phoneWidth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and (orientation: portrait)"; $phoneHeight: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and (orientation: landscape)"; +//$phoneBoth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck}"; + $tabletWidth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and (orientation: portrait)"; $tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and (orientation: landscape)"; -$compMinW: 801px; -$compMinH: 1025px; +//$tabletBoth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and (orientation: portrait)"; -$compBoth: "screen and (min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})"; +$compMinW: 801px; +$compWidPorCheck: "(min-device-width: #{$compMinW})"; +$compWidLanCheck: "(min-device-height: #{$compMinW})"; + +$compMinH: 1025px; +$compHeiPorCheck: "(min-device-height: #{$compMinH})"; +$compHeiLanCheck: "(min-device-width: #{$compMinH})"; + +$compWidth: "screen and #{$compWidPorCheck} and #{$compHeiPorCheck} and (orientation: portrait)"; +$compHeight: "screen and #{$compWidLanCheck} and #{$compHeiLanCheck} and (orientation: landscape)"; + +//$compBoth: "screen and (min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})"; $leftPhone: $phoMaxW/2; $leftTab: $tabMaxW/2; diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss index 1ca3a43851..58127a0c14 100644 --- a/platform/commonUI/general/res/sass/mobile/_mixins.scss +++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss @@ -43,7 +43,8 @@ //} @mixin desktop { - @media #{$compBoth} { + @media #{$compWidth}, + #{$compHeight} { @content } }