1
00:00:00,150 --> 00:00:06,480
And this is going to take care of our page in a tabloid format, so let's go down here and type in a

2
00:00:06,480 --> 00:00:09,020
comment responsive.

3
00:00:14,730 --> 00:00:19,080
Now, the first thing that we're going to take care of is a tablet format that we have not called a

4
00:00:19,080 --> 00:00:19,650
tablet.

5
00:00:21,060 --> 00:00:23,400
And after that, we'll have a desktop format.

6
00:00:26,750 --> 00:00:34,310
So let's go to our tablet format now, all set on medium, sort of in media for a minute this time,

7
00:00:35,870 --> 00:00:41,620
and I said when we're having a mobile first approach, we'll start from a downscaled version of the.

8
00:00:41,640 --> 00:00:46,680
First of all, it should look good on a phone and then we're going to work ourselves upwards.

9
00:00:46,880 --> 00:00:54,290
So this is why we're going to use the Menwith instead of the Mad Max with some Menwith, and we're going

10
00:00:54,290 --> 00:00:56,510
to set this to five hundred pixels.

11
00:00:57,440 --> 00:00:59,150
OK, so let's see what happens here.

12
00:00:59,160 --> 00:01:04,970
We first need to take care of our header and the tag.

13
00:01:07,660 --> 00:01:12,610
Now, what I want to do here is have this displayed as flex,

14
00:01:15,880 --> 00:01:22,000
and it should have a height of 100 percent and show you quickly what this does.

15
00:01:22,370 --> 00:01:33,580
This will already change our view direction from this coming the south again forming a column to a flex

16
00:01:33,580 --> 00:01:36,670
road direction because flex flex is automatically an arrow.

17
00:01:36,910 --> 00:01:45,370
Now, if I would change the class of had the text to have a height of one hundred viewport height.

18
00:01:47,110 --> 00:01:52,480
This will now set the left side to everyone, one, what you put right now, all we need to do is do

19
00:01:52,480 --> 00:01:56,050
the same thing for or had an image songa to type in here.

20
00:01:56,050 --> 00:02:06,340
Come idea had the image and as soon as we hit save, both of them will now have one hundred pupate heights.

21
00:02:08,340 --> 00:02:15,000
Now, let's go down to a contacts section, so I don't like this and don't really like how this is looking.

22
00:02:15,360 --> 00:02:24,150
Let's now take care of this by targeting our content contact container.

23
00:02:28,030 --> 00:02:31,240
And let's change is Fleck's direction to erro.

24
00:02:33,930 --> 00:02:39,930
And as justify the content, the center, and also align the items to the center.

25
00:02:43,960 --> 00:02:47,920
I guess that's pretty much all the changes that I want to do for for this family.

26
00:02:48,000 --> 00:02:51,400
We don't have an obligation, so we can't do anything with this.

27
00:02:52,880 --> 00:02:58,250
But as I said, this is just a simple Web page when we're working through our concept of mobile first

28
00:02:58,250 --> 00:02:58,690
approach.

29
00:02:59,540 --> 00:03:03,620
So the lesson we need to do is take care of this in a desktop format.

30
00:03:03,620 --> 00:03:05,180
So see the next one by.