bachir/gdp_vuewp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

responsive for landscape #830

Browse Source
This commit is contained in:
bachir
2022-03-17 18:27:28 +01:00
parent 006dd606ea
commit 2b40b9910d
3 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/base/_grid-flex.scss
+3 -3
View File
@@ -6,7 +6,7 @@
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
@media only screen and (max-width: $small-bp) {
@media only screen and (max-width: $small-bp), (orientation: portrait) {
flex-wrap:wrap;
}
}
@@ -20,7 +20,7 @@
// small
.small-row {
@media only screen and (max-width: $small-bp) {
@media only screen and (max-width: $small-bp), (orientation: portrait) {
@include row;
}
}
@@ -68,7 +68,7 @@
// small
.small-col-#{$c} {
@media only screen and (max-width: $small-bp) {
@media only screen and (max-width: $small-bp), (orientation: portrait) {
@include col($c);
}
}
assets/css/base/_layout.scss
+9 -3
View File
@@ -31,7 +31,7 @@ body{
flex: 0 0 auto;
@extend %layout-element;
padding:1em $side-padding 1em $side-padding;
@media only screen and (max-width: $small-bp) {
@media only screen and (max-width: $small-bp), (orientation: portrait) {
padding:1em $side-padding/2 0 $side-padding/2;
}
}
@@ -52,7 +52,7 @@ body{
>*{
@include fade-transition;
}
@media only screen and (max-width: $small-bp) {
@media only screen and (max-width: $small-bp), (orientation: portrait) {
overflow-y: auto;
padding:0 $side-padding/2 0 $side-padding/2;
}
@@ -79,7 +79,13 @@ body{
-webkit-overflow-scrolling: touch;
}
}
@media only screen and (max-width: $small-bp) {
@media only screen and (max-width: $small-bp), (orientation: portrait) {
.main-content-layout{
display: flex;
flex-direction: column;
}
}
@media (orientation: portrait) {
.main-content-layout{
display: flex;
flex-direction: column;