You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: learn/tasks/multicol/marking.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# Multicol Marking Guide
2
2
3
-
The aim of the tasks are to demonstrate an understanding of the properties covered in the [Multiple-column Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning) lesson in Learn Web Development on MDN.
3
+
The aim of the tasks are to demonstrate an understanding of the properties covered in the [Multiple-column Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) lesson in Learn Web Development on MDN.
The aim of the tasks are to demonstrate an understanding of the properties covered in the [Beginners Guide to Media Queries](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries) lesson in Learn Web Development on MDN.
4
+
5
+
This task not only asks the student to implement media queries correctly, they will also need to use the things they have learned about CSS Layout.
6
+
7
+
There is no one right answer however the following code demontrates how simply the task can be achieved, and this is really what we are looking for as it is easy to complicate this task. Using modern layout methods of flexbox and grid means that we only need one media query.
8
+
9
+
```
10
+
@media screen and (min-width: 60em) {
11
+
header {
12
+
display: flex; /* separate the nav and title */
13
+
justify-content: space-between;
14
+
align-items: center;
15
+
}
16
+
17
+
header ul {
18
+
display: flex; /* mav navigation display using flexbox */
19
+
}
20
+
21
+
header li {
22
+
margin: 0; / *remove the margin used in the mobile design */
23
+
}
24
+
25
+
header a {
26
+
border: 0; /*remove the border used in the mobile design */
27
+
}
28
+
29
+
main {
30
+
display: grid; /* a two column grid layout for the main content and sidebar */
31
+
grid-template-columns: 3fr 1fr;
32
+
gap: 20px;
33
+
margin-top: 20px;
34
+
}
35
+
36
+
.cards {
37
+
display: grid; /* a three column layout for the cards */
0 commit comments