1
00:00:06,200 --> 00:00:07,220
In this video.

2
00:00:07,220 --> 00:00:10,880
Let's work on the desktop responsive design.

3
00:00:10,910 --> 00:00:17,820
So what we're going to do is that on desktop we want to divide the layout into two.

4
00:00:17,840 --> 00:00:25,880
To have this sidebar to the right and the main content to the right as compared to the final one as

5
00:00:25,880 --> 00:00:27,510
we see on the screen.

6
00:00:27,530 --> 00:00:29,150
So let's get into that.

7
00:00:29,270 --> 00:00:34,280
Before we get into that, let's look at the logic behind what we are going to do.

8
00:00:34,310 --> 00:00:38,740
How to achieve division of layouts as this one.

9
00:00:38,750 --> 00:00:43,520
So what are going to do is that on the main, that is a flat container.

10
00:00:43,550 --> 00:00:48,950
We have two element or two children that is the main and then this side.

11
00:00:48,950 --> 00:00:56,510
So we are going to use Flexbox to change the direction to draw on desktop and secondly, to achieve

12
00:00:56,510 --> 00:01:03,500
a weight being bigger than other, we can use flex property or the width of the item.

13
00:01:03,590 --> 00:01:12,440
Remember the width of the parent is 100%, so the element inside must contain that 100%.

14
00:01:12,440 --> 00:01:18,050
So if you give the sidebar, let's say 30%, the remaining will be this one.

15
00:01:18,050 --> 00:01:20,960
So this one going to be bigger than this one.

16
00:01:20,960 --> 00:01:22,850
So let's see them with code.

17
00:01:22,850 --> 00:01:24,890
So now back to the CSS.

18
00:01:24,890 --> 00:01:28,550
We are going to work inside the media query.

19
00:01:28,550 --> 00:01:29,810
So here we go.

20
00:01:29,840 --> 00:01:32,180
We are going to target the main.

21
00:01:32,180 --> 00:01:39,590
So we bring in main here and then let's give it a weight of 70%.

22
00:01:39,620 --> 00:01:40,610
Let's save it.

23
00:01:40,610 --> 00:01:41,750
Let's check it out.

24
00:01:41,840 --> 00:01:43,430
Let's see what we are developing.

25
00:01:43,430 --> 00:01:51,200
And you can see that this is the main it has taken, what, 70%, the remaining one we are going to

26
00:01:51,200 --> 00:01:54,350
give to this one as 30%.

27
00:01:54,350 --> 00:01:56,510
So now let's have a look.

28
00:01:56,510 --> 00:01:58,580
That's going to be the side.

29
00:01:58,580 --> 00:02:06,020
So our site is going to be as weight of 30%.

30
00:02:06,230 --> 00:02:08,750
You can see that we have 70%.

31
00:02:08,750 --> 00:02:13,460
And then the other side is also 30%, as we see.

32
00:02:13,460 --> 00:02:19,760
But the problem is that by default, that is the on mobile, the direction was colored.

33
00:02:19,760 --> 00:02:22,940
So on desktop, let's change it to row.

34
00:02:22,940 --> 00:02:32,030
So now back here, let's select the actual flex container and then change the flex direction to row.

35
00:02:32,060 --> 00:02:34,040
Now let's see the magic.

36
00:02:34,040 --> 00:02:35,960
And here we go.

37
00:02:35,960 --> 00:02:42,860
You can see that when we are designing for mobile, first we write less code inside the media query.

38
00:02:42,890 --> 00:02:44,360
That is great.

39
00:02:44,600 --> 00:02:50,180
Okay, so what has left is going to be the content inside.

40
00:02:50,180 --> 00:02:54,350
So for this one, we can copy the content the way we want.

41
00:02:54,350 --> 00:03:01,850
So let's go to the main and this is the main, which is this one and we have one article, this one,

42
00:03:01,850 --> 00:03:08,780
so we can select this one and then shift option down key and paste many times save it and you are going

43
00:03:08,780 --> 00:03:12,020
to see that we have many posts here.

44
00:03:12,050 --> 00:03:14,810
The same thing applies to the sidebar too.

45
00:03:14,810 --> 00:03:22,850
We can go to the side here and this is the article for the side and we can select all or we can copy

46
00:03:22,850 --> 00:03:25,580
and then paste it as many as we want.

47
00:03:25,580 --> 00:03:33,560
And now this is what we have so we can change the content in it or the images based on the one I gave

48
00:03:33,560 --> 00:03:34,250
you here.

49
00:03:34,460 --> 00:03:42,500
Because of that, I am going to copy all the contents I use here because this one is all about copy

50
00:03:42,500 --> 00:03:43,700
and paste.

51
00:03:43,730 --> 00:03:44,600
Am I right?

52
00:03:44,600 --> 00:03:44,960
Yes.

53
00:03:44,960 --> 00:03:47,360
So I'll do that one behind the scene.

54
00:03:47,360 --> 00:03:52,040
When I finish, I will show you my result with different images, with different texts.

55
00:03:52,070 --> 00:03:53,030
Then this video.

56
00:03:53,060 --> 00:03:55,520
We are going to work on the photo.