1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-08-02 20:15:26 +02:00

Improve display on vertically constrained screens

Changed media queries to invoke mobile-first rendering if screen vertical height is less than 650px.
This commit is contained in:
Harvey Kandola 2019-01-13 13:57:12 +00:00
parent 317e9cbcaa
commit d05052a5b4
3 changed files with 778 additions and 778 deletions

View file

@ -36,8 +36,8 @@
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
// overflow-x: hidden;
// overflow-y: auto;
> .nav-options {
> .selected {
@ -130,7 +130,7 @@
}
// Tablet starts around 700px
@media (min-width: $display-break-1) {
@media (min-width: $display-break-1) and (min-height: 650px) {
.master-container {
display: grid;
grid-template-columns: 240px auto;
@ -230,7 +230,7 @@
}
// Small screen starts around 900px
@media (min-width: $display-break-2) {
@media (min-width: $display-break-2) and (min-height: 650px) {
.master-container {
display: grid;
grid-template-columns: 290px auto;
@ -315,7 +315,7 @@
}
// Medium screen starts around 1200px
@media (min-width: $display-break-3) {
@media (min-width: $display-break-3) and (min-height: 650px) {
.master-container {
display: grid;
grid-template-columns: 320px auto;
@ -352,7 +352,7 @@
}
// Large screen starts around 1600px
@media (min-width: $display-break-4) {
@media (min-width: $display-break-4) and (min-height: 650px) {
.master-container {
display: grid;
grid-template-columns: 370px minmax(auto, 1200px);