1
00:00:09,300 --> 00:00:13,590
In this video, let's make the number more responsive.

2
00:00:13,800 --> 00:00:15,470
So back to the seats.

3
00:00:15,480 --> 00:00:19,230
Like I said, we are using the mobile first approach.

4
00:00:19,230 --> 00:00:25,650
So our comment here as mobile first responsive design.

5
00:00:25,800 --> 00:00:28,590
So we are going to use media query for this.

6
00:00:28,590 --> 00:00:34,980
So media as a function and in here we are going to pass in the properties that we want to change.

7
00:00:34,980 --> 00:00:42,420
And for the function call for the media, we are going to pass in main width and if the main with a

8
00:00:42,440 --> 00:00:45,210
six, seven, five preserves.

9
00:00:45,210 --> 00:00:52,890
So inside here we are going to change the flex direction of the container to row.

10
00:00:52,890 --> 00:01:00,690
So here let's target the element four enough and then let's change the flex direction to row.

11
00:01:00,810 --> 00:01:02,820
And this is what we have.

12
00:01:02,820 --> 00:01:07,290
What I want is that I want the logo to be here and then length to be here.

13
00:01:07,290 --> 00:01:11,370
So we are going to use what is called just for content space between.

14
00:01:11,610 --> 00:01:16,380
So here we go, just file contain to be space between.

15
00:01:16,620 --> 00:01:18,420
Now let's have a look.

16
00:01:18,420 --> 00:01:20,460
And indeed this is what we have.

17
00:01:20,640 --> 00:01:25,890
And for this one to I want to change the direction to row that is the nav.

18
00:01:26,220 --> 00:01:28,320
L So here we go.

19
00:01:28,530 --> 00:01:37,260
Now bring in the nav and then the new arrow and and change the flex direction to row.

20
00:01:37,260 --> 00:01:40,260
And I want everything to be at the center.

21
00:01:40,260 --> 00:01:45,840
So align items and then the just fat content to be space between.

22
00:01:45,990 --> 00:01:53,580
So save it and now let's have a look and this is what we have or we can give you some margin rights

23
00:01:53,580 --> 00:01:58,330
as M are for margin rights as 20 page.

24
00:01:58,740 --> 00:02:02,220
So have a look and this is what we have.

25
00:02:02,220 --> 00:02:05,820
So next step is let's add some spacing between them.

26
00:02:05,820 --> 00:02:11,430
So you target the now and then the U.

27
00:02:11,460 --> 00:02:17,730
L and then the lines and let's add some padding for each as ten P6.

28
00:02:17,790 --> 00:02:22,800
So let's have a look and indeed we have some spacing between them.

29
00:02:22,800 --> 00:02:27,090
So on small screen you can see that it is more responsive.

30
00:02:27,330 --> 00:02:32,130
So the next step is that let's work on the actual layout.

31
00:02:32,130 --> 00:02:35,190
So let's get into that the next video.