mirror of
https://github.com/wallabag/wallabag.git
synced 2024-11-26 11:01:04 +00:00
mise en page adaptive
This commit is contained in:
parent
c594aedf8c
commit
c587d27c6d
1 changed files with 57 additions and 5 deletions
|
@ -55,18 +55,18 @@ footer {
|
|||
/*** GRID DISPLAY ***/
|
||||
|
||||
#content {
|
||||
width: 800px;
|
||||
width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#entries {
|
||||
-moz-column-count: 3;
|
||||
-moz-column-count: 4;
|
||||
-moz-column-gap: 20px;
|
||||
-webkit-column-count: 3;
|
||||
-webkit-column-count: 4;
|
||||
-webkit-column-gap: 20px;
|
||||
column-count: 3;
|
||||
column-count: 4;
|
||||
column-gap: 20px;
|
||||
width: 800px;
|
||||
width: 1000px;
|
||||
}
|
||||
|
||||
#entries span.content {
|
||||
|
@ -75,6 +75,58 @@ footer {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width : 1199px),
|
||||
only screen and (max-device-width : 1199px){
|
||||
#entries {
|
||||
-moz-column-count: 5;
|
||||
-moz-column-gap: 20px;
|
||||
-webkit-column-count: 5;
|
||||
-webkit-column-gap: 20px;
|
||||
column-count: 5;
|
||||
column-gap: 20px;
|
||||
width: 1000px;
|
||||
}
|
||||
|
||||
#content {
|
||||
width: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width : 999px),
|
||||
only screen and (max-device-width : 999px){
|
||||
#entries {
|
||||
-moz-column-count: 4;
|
||||
-moz-column-gap: 15px;
|
||||
-webkit-column-count: 4;
|
||||
-webkit-column-gap: 15px;
|
||||
column-count: 4;
|
||||
column-gap: 15px;
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
#content {
|
||||
width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width : 799px),
|
||||
only screen and (max-device-width : 799px){
|
||||
#entries {
|
||||
-moz-column-count: 3;
|
||||
-moz-column-gap: 10px;
|
||||
-webkit-column-count: 3;
|
||||
-webkit-column-gap: 10px;
|
||||
column-count: 3;
|
||||
column-gap: 10px;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
#content {
|
||||
width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width : 599px),
|
||||
only screen and (max-device-width : 599px){
|
||||
#entries {
|
||||
|
|
Loading…
Reference in a new issue