Skip to content

Commit 840da38

Browse files
committed
Refactor mobile styles to improve layout and responsiveness; adjust footer positioning and ensure it remains at the bottom of the viewport on mobile devices.
1 parent 2754410 commit 840da38

File tree

1 file changed

+26
-5
lines changed

1 file changed

+26
-5
lines changed

css/mobile.css

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,14 @@
99
section {
1010
width: 100%;
1111
min-height: inherit;
12+
flex: 1;
1213
}
1314

1415
.content-wrapper {
15-
height: 95vh;
16+
min-height: 95vh;
17+
height: auto;
18+
display: flex;
19+
flex-direction: column;
1620
}
1721

1822
.hero {
@@ -30,10 +34,15 @@
3034
width: 100%;
3135
padding: 0;
3236
max-width: 100vw;
37+
flex: 1;
38+
display: flex;
39+
flex-direction: column;
3340
}
3441

3542
.list {
3643
margin-top: 1em;
44+
flex: 1;
45+
margin-bottom: 2em;
3746
}
3847

3948
.dt {
@@ -43,14 +52,19 @@
4352
align-items: flex-start;
4453
}
4554

46-
/* Footer */
47-
.footer {
48-
display: flex;
49-
position: static;
55+
/* Footer - Force static positioning on mobile for all pages */
56+
.footer,
57+
.hero-footer,
58+
footer {
59+
display: flex !important;
60+
position: static !important;
5061
align-items: flex-start;
5162
flex-direction: column;
5263
justify-content: flex-end;
5364
padding: 0;
65+
right: auto !important;
66+
bottom: auto !important;
67+
margin-top: 2em;
5468
}
5569

5670
.footer > a {
@@ -59,6 +73,13 @@
5973
border: none;
6074
text-decoration: underline;
6175
}
76+
77+
/* Ensure footer is always at bottom on mobile */
78+
body {
79+
display: flex;
80+
flex-direction: column;
81+
min-height: 100vh;
82+
}
6283
}
6384

6485
/* Desktop Styles */

0 commit comments

Comments
 (0)