1
00:00:00,930 --> 00:00:07,620
Well, giving it another property, and let's give let's talk it out element, and this time, let's

2
00:00:07,620 --> 00:00:10,680
just give it a margin bottom.

3
00:00:13,330 --> 00:00:17,970
One point about to buy them, as well as a color of.

4
00:00:19,820 --> 00:00:25,190
It is a two and zero and twenty two point forty nine percent.

5
00:00:29,280 --> 00:00:32,640
OK, so we have a Plan B. We have that attitude.

6
00:00:32,910 --> 00:00:34,950
Now we want that app to be responsive, right?

7
00:00:34,980 --> 00:00:41,310
We do not want the mobile users as the desktop users to just run away from here because it's not responsive.

8
00:00:41,610 --> 00:00:44,670
So let's add responsiveness to adapt by using media queries.

9
00:00:45,060 --> 00:00:50,490
So just target media screen and we give it a minute off.

10
00:00:55,930 --> 00:01:02,920
So what this particular statement will do, it will say to us, Rosa, what you have to display if the

11
00:01:02,920 --> 00:01:08,770
minimum weight of our screen is more than 800 pixels, if it is minimum 800 pixels, then I want you

12
00:01:08,770 --> 00:01:13,450
to render this test or the one that we have before.

13
00:01:13,810 --> 00:01:16,320
So let's give it a one size of 1.9.

14
00:01:16,330 --> 00:01:16,750
Five.

15
00:01:18,630 --> 00:01:27,060
RAM, in case of H3 and in case of etch, we wanted to find ways to increase to random.

16
00:01:28,940 --> 00:01:34,340
And apart from it, war, we want the body to be increased to one size to abandon.

17
00:01:39,040 --> 00:01:43,660
And apart from what they will target the H3 and H4 and give it a line out of.

18
00:01:46,330 --> 00:01:47,050
And give it a.

19
00:01:49,670 --> 00:01:51,350
Nine out of one.

20
00:01:51,890 --> 00:01:58,640
OK, then just hit save, and this will add responsiveness to that app, but only to the edge three

21
00:01:58,640 --> 00:02:00,110
inch forward as well as the body.

22
00:02:00,350 --> 00:02:01,790
Now let's take a look at that app.

23
00:02:02,900 --> 00:02:04,160
OK, so we have that.

24
00:02:04,910 --> 00:02:06,230
But what if I just.

25
00:02:07,450 --> 00:02:09,280
Shrink my screen.

26
00:02:11,460 --> 00:02:12,270
A little bit.

27
00:02:13,230 --> 00:02:13,650
More.

28
00:02:15,080 --> 00:02:19,250
We see the font size obviously decreased and the letter spacing.

29
00:02:19,910 --> 00:02:22,040
So let's put it back to full screen.

30
00:02:22,700 --> 00:02:28,640
OK, so now let's move back into that index notices.

31
00:02:28,730 --> 00:02:35,390
So now let's target the main coordinators of the app will target our main element and we will give it

32
00:02:35,390 --> 00:02:36,230
a minute of.

33
00:02:45,740 --> 00:02:50,060
Well, our main elements and give it give them a minute of.

34
00:02:56,410 --> 00:02:57,650
One hundred which?

35
00:03:01,570 --> 00:03:02,770
Our display of Flex.

36
00:03:10,880 --> 00:03:13,220
And just if I contend to center.

37
00:03:15,170 --> 00:03:18,620
And align items should be sent there because we want the items to be centered.

38
00:03:20,730 --> 00:03:26,310
Then just head there and let you add up again, but all elements have been so internal as well as there's

39
00:03:26,310 --> 00:03:31,890
a bit of uniformity, but we obviously do not want that to look like this, so we'll be adding some

40
00:03:31,890 --> 00:03:33,390
more amount of code to add up.

41
00:03:33,690 --> 00:03:38,550
So let's just head back and know it as they are targeted the main element.

42
00:03:38,910 --> 00:03:43,790
Now it's time to target certain other elements of our H.M. page.

43
00:03:44,790 --> 00:03:47,040
Very targeted the next container container.

44
00:03:51,190 --> 00:03:56,980
As you might recall, in our Abdul G.S., we had the section with a class name of container.

45
00:03:57,430 --> 00:03:59,450
So this is our next target.

46
00:04:00,010 --> 00:04:01,030
We've got a bit of.

47
00:04:03,710 --> 00:04:04,580
Ninety you.

48
00:04:08,970 --> 00:04:11,120
Margin of firearm.