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/app.scss
+7 -7
View File
@@ -172,7 +172,7 @@ section[role="main-content"]{
@include teasersfilet(8em, 0.5em);
}
// responsive
@media only screen and (max-width: $small-bp) {
@media only screen and (max-width: $small-bp), (orientation: portrait) {
header{
h1{
font-size: 5em;
@@ -530,7 +530,7 @@ section[role="main-content"]{
time{
font-weight: 600;
}
@media only screen and (max-width: $small-bp) {
@media only screen and (max-width: $small-bp), (orientation: portrait) {
background-color: #fff;
padding: 1em;
box-shadow: 0 0 10px $gris;
@@ -826,7 +826,7 @@ section[role="main-content"]{
}
}
// responsive
@media only screen and (max-width: $small-bp) {
@media only screen and (max-width: $small-bp), (orientation: portrait) {
position: relative;
>nav{
$top: 45px;
@@ -976,7 +976,7 @@ footer[role="tools"]{
z-index: 9;
background-color: $gris;
padding:1.2em $side-padding;
@media only screen and (max-width: $small-bp) {
@media only screen and (max-width: $small-bp), (orientation: portrait) {
padding:1.2em $side-padding/2;
}
max-height: $list-item-h * 3;
@@ -1026,7 +1026,7 @@ footer[role="tools"]{
}
// responsive
@media only screen and (max-width: $small-bp) {
@media only screen and (max-width: $small-bp), (orientation: portrait) {
position: relative;
>header{
padding:0 0 1em 0;
@@ -1053,7 +1053,7 @@ footer[role="tools"]{
#footer-bottom{
z-index: 10;
padding:0 $side-padding;
@media only screen and (max-width: $small-bp) {
@media only screen and (max-width: $small-bp), (orientation: portrait) {
padding:0 $side-padding/2;
}
background-color: $bleuroi;
@@ -1168,7 +1168,7 @@ footer[role="tools"]{
}
// responsive
@media only screen and (max-width: $small-bp) {
@media only screen and (max-width: $small-bp), (orientation: portrait) {
form{
fieldset{
&.search{
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;