Mobile layout improvements
- Images must fit within the screen - Attempt to make horizontal page footers vertical on mobile
This commit is contained in:
parent
62e1cb33c8
commit
660ec56e73
1 changed files with 33 additions and 12 deletions
|
@ -64,11 +64,6 @@ p {
|
|||
.custom-footer__cols {
|
||||
display: grid;
|
||||
}
|
||||
@media (min-width: 560px) {
|
||||
.custom-footer__cols {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
.my-logo {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
@ -115,6 +110,13 @@ p {
|
|||
display: none;
|
||||
}
|
||||
|
||||
/* don't allow images to extend past the edge of the page */
|
||||
img {
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* allow tables to scroll horizontally if needed */
|
||||
.table-scroller {
|
||||
overflow: auto;
|
||||
|
@ -178,13 +180,6 @@ figcaption, .lightbox-caption, .thumbcaption {
|
|||
display: block;
|
||||
}
|
||||
|
||||
/* category list columns */
|
||||
@media (min-width: 700px) {
|
||||
.my-category-list {
|
||||
columns: 3;
|
||||
}
|
||||
}
|
||||
|
||||
/* animated slots */
|
||||
#mw-content-text .animated > :not(.animated-active), #mw-content-text .animated > .animated-subframe > :not(.animated-active) {
|
||||
display: inline-block;
|
||||
|
@ -221,3 +216,29 @@ figcaption, .lightbox-caption, .thumbcaption {
|
|||
color: var(--theme-page-text-color--hover);
|
||||
margin-left: 1.2em;
|
||||
}
|
||||
|
||||
/* media queries */
|
||||
|
||||
/* for reference, cell phone screens are generally 400 px wide, definitely less than 500 px */
|
||||
|
||||
@media (min-width: 700px) { /* wider than 700 px */
|
||||
/* category list columns */
|
||||
.my-category-list {
|
||||
columns: 3;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 560px) { /* wider than 560 px */
|
||||
/* footer columns */
|
||||
.custom-footer__cols {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 559px) { /* narrower than 560 px */
|
||||
/* attempt to make horizontal wiki page footers vertical instead - see /nfs/wiki/Need_for_Speed_Wiki */
|
||||
[style*="width:calc(100%"] {
|
||||
width: auto !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue