Fix footer link layout on mobile
- Add explicit 3-column grid for desktop footer - Switch to a 2+1 responsive layout under 768px - Keep desktop-only 50px indent on tools list - Balance the bottom 'about' list by flowing it into two columns on mobile
This commit is contained in:
parent
f62504458d
commit
1700c9b911
@ -1743,13 +1743,14 @@ ol {
|
|||||||
|
|
||||||
.footer-contents {
|
.footer-contents {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
grid-gap: 50px;
|
grid-gap: 50px;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-list-internals {
|
.link-list-internals {
|
||||||
grid-column: 1/3;
|
grid-column: 1/2;
|
||||||
grid-row: 1/1;
|
grid-row: 1/1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1759,10 +1760,38 @@ ol {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.link-list-about {
|
.link-list-about {
|
||||||
grid-column: 3/3;
|
grid-column: 3/4;
|
||||||
grid-row: 1/1;
|
grid-row: 1/1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.footer-contents {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-list-internals {
|
||||||
|
grid-column: 1/2;
|
||||||
|
grid-row: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-list-tools {
|
||||||
|
grid-column: 2/3;
|
||||||
|
grid-row: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-list-about {
|
||||||
|
grid-column: 1/3;
|
||||||
|
grid-row: auto;
|
||||||
|
column-count: 2;
|
||||||
|
column-gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-list-about li {
|
||||||
|
break-inside: avoid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#footer {
|
#footer {
|
||||||
background: var(--card-inner);
|
background: var(--card-inner);
|
||||||
border: 1.5px solid var(--border-gold);
|
border: 1.5px solid var(--border-gold);
|
||||||
@ -1795,9 +1824,11 @@ ol {
|
|||||||
border-bottom: 2px solid var(--accent-border);
|
border-bottom: 2px solid var(--accent-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 769px) {
|
||||||
#footer .link-list-tools li {
|
#footer .link-list-tools li {
|
||||||
padding-right: 50px;
|
padding-right: 50px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.recitaion-info {
|
.recitaion-info {
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user