1

00:00:00,180 --> 00:00:07,830

OK, guys, so in this video, we bill and the class of container that will prevent the x axis drilling,



2

00:00:07,830 --> 00:00:14,430

which we have seen before, we can go to the grid system and get to the first screen, which is for



3

00:00:15,000 --> 00:00:16,320

the small.



4

00:00:16,740 --> 00:00:32,580

We can give here a class of container small and then we can capture this one right here and where it



5

00:00:32,580 --> 00:00:34,470

will be starting from here.



6

00:00:34,620 --> 00:00:35,020

Yes.



7

00:00:36,060 --> 00:00:39,060

And then we can go to the grid system.



8

00:00:40,470 --> 00:00:41,810

Where is the small.



9

00:00:41,850 --> 00:00:42,750

This one here.



10

00:00:44,460 --> 00:00:53,900

And we can make here colon off a solid container, small and container.



11

00:00:53,910 --> 00:01:00,330

And I'm going to show you very soon why we are taking this class, this to be and then getting right



12

00:01:00,660 --> 00:01:05,610

one or m and putting the left of one up.



13

00:01:06,540 --> 00:01:10,800

Let's go to the small screen and see if we have.



14

00:01:11,160 --> 00:01:20,370

So now we got no crawl access anymore, but we can make it up on five to make it smaller.



15

00:01:20,940 --> 00:01:21,510

No, no.



16

00:01:21,510 --> 00:01:26,850

We got here so let's make it a point seven and seven.



17

00:01:28,470 --> 00:01:30,050

I think one would be perfect.



18

00:01:30,090 --> 00:01:31,720

So let's make it warm.



19

00:01:33,330 --> 00:01:39,540

But I'm going to show you again, the problem is with this text, if would you leave this text, we



20

00:01:39,540 --> 00:01:41,400

are having no problem.



21

00:01:41,430 --> 00:01:46,080

This one and this one, I think because it's over the background color.



22

00:01:46,620 --> 00:01:53,630

And then now we can try for the container making.



23

00:01:53,640 --> 00:02:08,010

We can go here and make a class of container means you can copy this one and make it here.



24

00:02:09,120 --> 00:02:09,960

Go to the C.



25

00:02:10,140 --> 00:02:10,500

S.



26

00:02:10,620 --> 00:02:11,930

You can cover this one.



27

00:02:12,930 --> 00:02:14,490

Go here.



28

00:02:16,470 --> 00:02:18,540

Let's start first with two.



29

00:02:18,830 --> 00:02:23,190

And so now we've got this for the small screen.



30

00:02:23,550 --> 00:02:26,130

When we reach the medium, we get to.



31

00:02:26,400 --> 00:02:28,710

Let's make it just one.



32

00:02:31,120 --> 00:02:32,830

I think one is perfect.



33

00:02:33,640 --> 00:02:39,240

This is the one after this part we got here, this to be.



34

00:02:43,090 --> 00:02:43,780

Yes.



35

00:02:43,780 --> 00:02:46,710

And it's also to be here medium.



36

00:02:47,980 --> 00:02:48,880

This is the medium.



37

00:02:48,880 --> 00:02:50,290

I think we got something wrong with the.



38

00:02:50,820 --> 00:02:53,260

So what's the problem?



39

00:02:55,570 --> 00:02:56,830

Let's call this part.



40

00:02:57,160 --> 00:03:00,040

Is it for the medium container medium?



41

00:03:01,750 --> 00:03:04,180

Let's reach the medium screen.



42

00:03:04,540 --> 00:03:05,920

Now we get something wrong.



43

00:03:05,950 --> 00:03:06,370

Yes.



44

00:03:06,370 --> 00:03:07,330

This is the medium.



45

00:03:07,330 --> 00:03:13,320

Sorry, we can go to the medium screen and then we have this.



46

00:03:13,690 --> 00:03:17,890

Let's see if we can edit or we can just leave it like that, I think.



47

00:03:18,400 --> 00:03:20,410

Or we can make it all point eight.



48

00:03:22,210 --> 00:03:23,230

One is perfect.



49

00:03:23,260 --> 00:03:24,330

OK, one is good.



50

00:03:25,240 --> 00:03:28,750

And after this part we got for the last screen.



51

00:03:28,750 --> 00:03:33,560

But because when we get to the larger we are having nothing.



52

00:03:34,270 --> 00:03:38,390

So let's cover this part and go to the large screen.



53

00:03:40,400 --> 00:03:48,950

OK, we can paste this once before we're going to meet our lawyers and we can scroll down until we reach



54

00:03:49,280 --> 00:03:58,940

the larger they want to be on gone to get this one to be the closure of this division.



55

00:03:59,990 --> 00:04:01,540

Yes, it's here.



56

00:04:03,380 --> 00:04:06,500

Here is large and just need to make it here.



57

00:04:06,920 --> 00:04:12,260

Larger container, larger reload.



58

00:04:14,540 --> 00:04:15,720

What's the problem here?



59

00:04:15,740 --> 00:04:20,330

I think we got something wrong with this part container.



60

00:04:20,450 --> 00:04:22,820

Just what's the problem?



61

00:04:23,890 --> 00:04:25,350

Yes, the last three.



62

00:04:25,880 --> 00:04:28,370

So now we got this for the large screen.



63

00:04:28,370 --> 00:04:35,500

When we go back to the meeting, we got this back and now we can drive through the large screen.



64

00:04:35,510 --> 00:04:37,410

We can't make X explosion.



65

00:04:37,940 --> 00:04:39,680

We can't copy this division.



66

00:04:40,370 --> 00:04:50,300

Go back over, scroll down any way past this here and get closure for the closure.



67

00:04:50,300 --> 00:04:56,210

We can scroll and sorry for the closure.



68

00:04:56,210 --> 00:05:04,890

We can scroll down down down here and just want to be at large of large.



69

00:05:05,570 --> 00:05:11,030

We can go back here covid this one and sit here.



70

00:05:14,100 --> 00:05:15,620

They want to be heard, excellent.



71

00:05:15,900 --> 00:05:19,970

Let's see if one hour is perfect for the X lawyers.



72

00:05:21,390 --> 00:05:25,980

I think we can make it four, three and three.



73

00:05:27,180 --> 00:05:28,910

Three and three is good.



74

00:05:29,460 --> 00:05:38,790

And then now what we can do is to check for the X X large screen, but we can just copy and paste for



75

00:05:38,940 --> 00:05:45,510

the X X large screen because we didn't add it inside our web page.



76

00:05:46,440 --> 00:05:47,690

Let's make it five.



77

00:05:47,700 --> 00:05:48,980

I think five will be good.



78

00:05:50,520 --> 00:05:58,420

And then after this part, the purpose of container, the container will be covering all of this with



79

00:05:58,420 --> 00:06:00,110

list for all of the screen.



80

00:06:00,540 --> 00:06:03,300

So for the small screen, it will be having one already.



81

00:06:03,930 --> 00:06:07,230

For the medium, it will be having almost one hour and one hour.



82

00:06:07,350 --> 00:06:10,140

And let's make this to be three.



83

00:06:12,160 --> 00:06:13,680

Let's start from the beginning.



84

00:06:13,680 --> 00:06:18,000

We can make this one to be one, two.



85

00:06:20,910 --> 00:06:27,220

This to be three days, to be four, and the last one will be five.



86

00:06:27,630 --> 00:06:34,110

So the container, just container for the small screen will be having one for the medium, which will



87

00:06:34,110 --> 00:06:38,820

be having two for the larger three for sure.



88

00:06:38,820 --> 00:06:44,990

And for the larger it will be having the, uh, five.



89

00:06:45,360 --> 00:06:49,590

And we can also add a class of container flight.



90

00:06:49,770 --> 00:06:58,530

We can add it right here, container flood, which is always having the width of one hundred percent



91

00:06:58,530 --> 00:06:59,370

of the page.



92

00:07:00,630 --> 00:07:02,370

OK, so now that's good.



93

00:07:02,370 --> 00:07:07,980

And we have added a container to prevent the x axis scrolling.



94

00:07:07,980 --> 00:07:16,350

If you see here, we can go to the smallest one and just container.



95

00:07:17,100 --> 00:07:20,970

So here we got one hundred percent and when we get to the small, we got this.



96

00:07:21,510 --> 00:07:23,790

When we go to the medium, we got different.



97

00:07:24,540 --> 00:07:29,100

And also we have for the rest of the screens and that's good.



98

00:07:29,790 --> 00:07:36,000

And what about container flight is having the width of one hundred percent.



99

00:07:36,780 --> 00:07:42,480

This will be always having the width of one hundred percent, but sometimes make the problem.



100

00:07:42,810 --> 00:07:51,090

As you can see here for the small screen, we got over Skrull of X and we don't want that to prevent



101

00:07:51,090 --> 00:07:52,890

this from this any anyway.



102

00:07:53,230 --> 00:07:56,030

There's a property which is called overflow.



103

00:07:56,460 --> 00:08:01,830

We can build here, make it for the body, for universe.



104

00:08:01,830 --> 00:08:02,400

One way.



105

00:08:03,360 --> 00:08:08,060

Yes, it be having overflow X of.



106

00:08:10,230 --> 00:08:13,260

So now we can we cannot run the X direction.



107

00:08:13,470 --> 00:08:20,160

And if we make for the white origin we are not able to scroll on the Y direction anymore.



108

00:08:20,460 --> 00:08:25,580

We can delete this one and change this one to be calling it small.



109

00:08:26,340 --> 00:08:31,290

So that's all about that containers and the response of great system.



110

00:08:31,710 --> 00:08:38,940

From the next section we will start creating our project for this is as people try to use only what



111

00:08:38,940 --> 00:08:47,700

we learned from transforms for other forms, uh, of our function, active functions and all of that.



112

00:08:48,060 --> 00:08:50,330

So good luck and have fun.