diff --git a/src/App/styles.less b/src/App/styles.less index c8027018a..8cea6cd21 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -135,4 +135,11 @@ html { html { font-size: 14px; } +} + +@media only screen and (max-width: @xsmall) { + html { + min-width: inherit !important; + min-height: inherit !important; + } } \ No newline at end of file diff --git a/src/common/MainNavBars/styles.less b/src/common/MainNavBars/styles.less index 9b149edf5..84d8d370a 100644 --- a/src/common/MainNavBars/styles.less +++ b/src/common/MainNavBars/styles.less @@ -1,4 +1,5 @@ // Copyright (C) 2017-2020 Smart code 203358507 +@import (reference) '~stremio/common/screen-sizes.less'; .main-nav-bars-container { position: relative; @@ -28,4 +29,17 @@ left: var(--vertical-nav-bar-size); z-index: 0; } +} + +@media only screen and (max-width: @xsmall) { + .main-nav-bars-container { + .nav-content-container { + left: 0 !important; + bottom: var(--vertical-nav-bar-size) !important; + } + + .vertical-nav-bar { + top: initial !important; + } + } } \ No newline at end of file diff --git a/src/common/NavBar/VerticalNavBar/styles.less b/src/common/NavBar/VerticalNavBar/styles.less index 6e47c60df..21a99ae1d 100644 --- a/src/common/NavBar/VerticalNavBar/styles.less +++ b/src/common/NavBar/VerticalNavBar/styles.less @@ -1,6 +1,7 @@ // Copyright (C) 2017-2020 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; +@import (reference) '~stremio/common/screen-sizes.less'; .vertical-nav-bar-container { width: var(--vertical-nav-bar-size); @@ -24,4 +25,24 @@ margin-bottom: 1rem; } } +} + +@media only screen and (max-width: @xsmall) { + .vertical-nav-bar-container { + display: flex; + flex-direction: row; + justify-content: space-between; + height: var(--vertical-nav-bar-size) !important; + width: 100% !important; + overflow: hidden !important; + overflow-x: auto !important; + + .nav-tab-button { + flex: none; + + &:first-child { + margin-top: 0 !important; + } + } + } } \ No newline at end of file