Skip to content

Commit e8b0bc4

Browse files
committed
Footer positioning fix and article spacing adjustment
1 parent d16c2f0 commit e8b0bc4

1 file changed

Lines changed: 18 additions & 25 deletions

File tree

Wireframe/style.css

Lines changed: 18 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,3 @@
1-
/* Here are some starter styles
2-
You can edit these or replace them entirely
3-
It's showing you a common way to organise CSS
4-
And includes solutions to common problems
5-
As well as useful links to learn more */
6-
7-
/* ====== Design Palette ======
8-
This is our "design palette".
9-
It sets out the colours, fonts, styles etc to be used in this design
10-
At work, a designer will give these to you based on the corporate brand, but while you are learning
11-
You can design it yourself if you like
12-
Inspect the starter design with Devtools
13-
Click on the colour swatches to see what is happening
14-
I've put some useful CSS you won't have learned yet
15-
For you to explore and play with if you are interested
16-
https://web.dev/articles/min-max-clamp
17-
https://scrimba.com/learn-css-variables-c026
18-
====== Design Palette ====== */
191
:root {
202
--paper: oklch(7 0 0);
213
--ink: color-mix(in oklab, var(--color) 5%, black);
@@ -52,7 +34,11 @@ main {
5234
footer {
5335
position: fixed;
5436
bottom: 0;
55-
text-align: center;
37+
left: 0;
38+
width: 100%;
39+
background: white;
40+
border-top: 1px solid black;
41+
z-index: 9999;
5642
}
5743
/* ====== Articles Grid Layout ====
5844
Setting the rules for how articles are placed in the main element.
@@ -80,10 +66,17 @@ article {
8066
text-align: left;
8167
display: grid;
8268
grid-template-columns: var(--space) 1fr var(--space);
83-
> * {
84-
grid-column: 2/3;
85-
}
86-
> img {
87-
grid-column: span 3;
88-
}
69+
}
70+
71+
article > * {
72+
grid-column: 2 / 3;
73+
}
74+
75+
article > img {
76+
grid-column: span 3;
77+
}
78+
79+
article h2,
80+
article p {
81+
margin: 0;
8982
}

0 commit comments

Comments
 (0)