1
00:00:02,420 --> 00:00:10,460
So time to work on the footer. For that, let's also inspect it right here to see if we can find a structure

2
00:00:10,580 --> 00:00:12,020
we might already know.

3
00:00:12,320 --> 00:00:19,220
Now this is the footer, inside the footer we have the nav, then we have a class and then we have an unordered

4
00:00:19,220 --> 00:00:21,840
list with two list items.

5
00:00:22,760 --> 00:00:24,490
Now we know the structure already,

6
00:00:24,500 --> 00:00:31,700
right because what we can do now is, we can simply say that we will turn our main footer links class,

7
00:00:31,700 --> 00:00:34,570
so this one right here into a flex container

8
00:00:34,790 --> 00:00:41,750
and with that, we will be able to position our two flex items. For that,

9
00:00:41,750 --> 00:00:49,050
we will go back to the code and go to the main footer links class,

10
00:00:49,060 --> 00:00:50,050
where is it? Here

11
00:00:50,120 --> 00:00:53,300
it is, to the main footer links class,

12
00:00:53,340 --> 00:00:55,220
so this class right here.

13
00:00:55,460 --> 00:01:01,630
Now as I said, I would like to turn this class into a flex container,

14
00:01:01,730 --> 00:01:06,130
therefore we can delete again text align and now simply type display

15
00:01:06,200 --> 00:01:08,510
flex right here, like that.

16
00:01:09,700 --> 00:01:15,970
Additionally, as we see it right here, we can also delete the display block declaration from the

17
00:01:16,060 --> 00:01:21,880
now flex items because, let me show you again, this will now be our flex container and these will be flex

18
00:01:21,880 --> 00:01:22,390
items,

19
00:01:22,450 --> 00:01:25,180
so display block should not be required here anymore,

20
00:01:25,340 --> 00:01:35,630
let's delete that. If we now save that and reload the page, yes we can see that we kind of changed something

21
00:01:36,080 --> 00:01:42,410
but it doesn't work perfectly at the moment because we are in the mobile view and actually support should

22
00:01:42,410 --> 00:01:43,460
be displayed above

23
00:01:43,460 --> 00:01:46,610
Terms of Use but we learn how to change this, right?

24
00:01:46,700 --> 00:01:56,810
Because if we simply change the default value for the flex direction which is row to column, like that

25
00:01:57,280 --> 00:02:04,320
and go back like this, then we can see that the items are now positioned below each other.

26
00:02:04,580 --> 00:02:09,330
What we then have to do is, keep in mind the flex direction is now column,

27
00:02:09,350 --> 00:02:12,280
so the main axis goes from top to bottom,

28
00:02:12,290 --> 00:02:14,840
this means the cross axis goes from left to right,

29
00:02:14,840 --> 00:02:21,770
so if we apply align items center, we would center our items along the cross axis and I think this would

30
00:02:21,830 --> 00:02:24,040
also be a good improvement now.

31
00:02:24,230 --> 00:02:32,570
So let's say align items center right here, like that and let's reload the page,

32
00:02:32,810 --> 00:02:34,680
yes now this looks better.

33
00:02:34,970 --> 00:02:41,030
What we can also see is that the distance between the two items increased because now that we applied

34
00:02:41,090 --> 00:02:47,240
flexbox, you can see that the margin collapsing between these two items is not happening anymore but

35
00:02:47,300 --> 00:02:54,700
we can easily fix that if we just decrease the margin from 1rem to 0.5rem, like that.

36
00:02:54,810 --> 00:02:56,550
Let's see, if we reload the page,

37
00:02:56,720 --> 00:02:57,330
yes,

38
00:02:57,500 --> 00:03:02,870
now it looks the way it looked before, I think this is nicer with that closer gap between the two items.

39
00:03:03,230 --> 00:03:12,460
And with that, we actually turned this footer into a flexbox or flex container, flex item construct.

40
00:03:12,500 --> 00:03:19,040
The only thing we have to change of course is the desktop view now because as you can see, this simply

41
00:03:19,040 --> 00:03:22,400
stays the way it is before because we have to change,

42
00:03:22,400 --> 00:03:24,360
well what do we have to change actually?

43
00:03:24,740 --> 00:03:27,480
Well, we simply have to go down right here

44
00:03:28,580 --> 00:03:31,300
to our main footer link right here,

45
00:03:31,310 --> 00:03:37,190
so that's basically the same links again and delete display inline block because that's not required

46
00:03:37,190 --> 00:03:40,190
anymore as we have flex items. With that, let's see,

47
00:03:40,350 --> 00:03:42,200
no change,

48
00:03:42,200 --> 00:03:52,010
so not what we want but if we now scroll up again, right here to our main footer links, so the flex container,

49
00:03:52,220 --> 00:04:00,200
I will just copy the entire container because that's faster to do and add it right here and now only keep

50
00:04:00,860 --> 00:04:04,020
the flex direction

51
00:04:04,050 --> 00:04:07,480
but this should now be row and important,

52
00:04:07,590 --> 00:04:13,780
we can keep align items, that's not the problem but we also need justify content now

53
00:04:14,070 --> 00:04:22,440
because with that, we can ensure that our items are well-positioned in the center of the footer and therefore,

54
00:04:22,560 --> 00:04:28,890
this looks like that. So important to remember that, flex direction row simply means the main axis goes from

55
00:04:28,890 --> 00:04:29,770
left to right

56
00:04:30,920 --> 00:04:34,030
and the elements are positioned along this main axis,

57
00:04:34,030 --> 00:04:41,250
then we use justify content to position the elements in the center of the flex container, like that

58
00:04:41,470 --> 00:04:49,700
and with align items which we have right here, center, we make sure that our elements are positioned

59
00:04:49,790 --> 00:04:58,960
in the center along the cross axis. And with that, we also turned our footer into a flexbox construct

60
00:04:59,050 --> 00:05:00,490
as I would call it

61
00:05:00,490 --> 00:05:07,600
and before we continue, let me quickly scroll through the code and see if we have to delete anything

62
00:05:07,690 --> 00:05:08,780
right here

63
00:05:10,010 --> 00:05:15,830
because maybe, yes this part right here, this commented out part, we can actually delete that, we don't need

64
00:05:15,830 --> 00:05:17,930
it anymore because we know flexbox works now.

65
00:05:17,930 --> 00:05:22,110
Let's see if we have anything else right here in our shared.css file,

66
00:05:22,400 --> 00:05:24,950
no I think this looks good actually,

67
00:05:25,190 --> 00:05:25,690
yes.

68
00:05:25,760 --> 00:05:29,530
And with that, we can actually continue with the next lecture,

69
00:05:29,660 --> 00:05:33,710
well we will have a look at your assignment in the flexbox module.