1
00:00:00,450 --> 00:00:01,530
In this video.

2
00:00:01,530 --> 00:00:05,610
We are going to improve the post details page.

3
00:00:05,610 --> 00:00:11,120
You can see how it's being clustered around and on Mobile View.

4
00:00:11,130 --> 00:00:12,440
Let's have a look.

5
00:00:12,450 --> 00:00:16,560
You can see that it's a little bit okay, but it is not.

6
00:00:16,800 --> 00:00:22,890
Again, let's look at how the CSS is being used for the post details.

7
00:00:23,160 --> 00:00:31,500
I use the same CSS for the post layers for the post details, so let's have some separation of concern

8
00:00:31,830 --> 00:00:33,060
because of that.

9
00:00:33,060 --> 00:00:39,240
Let's get into the post details and let's change some of the CSS classes.

10
00:00:39,240 --> 00:00:47,430
So for this we have this section that wrapped the entire content and we have the main, which is the

11
00:00:47,430 --> 00:00:50,160
main content here for the post details.

12
00:00:50,160 --> 00:00:58,530
And we have the aside, which is the sidebar, which is this one for the author info.

13
00:00:58,770 --> 00:01:06,240
So I use the same CSS class for the post list and it's conflicting to that.

14
00:01:06,240 --> 00:01:11,400
So let's copy all the CSS pertaining to the post details.

15
00:01:11,400 --> 00:01:14,460
And again, this video is going to be optional video.

16
00:01:14,640 --> 00:01:22,590
So for this one I want to rename this class for post content to post details content.

17
00:01:23,470 --> 00:01:23,950
Dash.

18
00:01:23,950 --> 00:01:26,380
That's and that is it.

19
00:01:26,380 --> 00:01:29,830
Likewise, this one going to be post details.

20
00:01:30,070 --> 00:01:31,640
I think this one is okay.

21
00:01:31,660 --> 00:01:40,420
So now when I save it and let's refresh it and you can see that it's no more using the CSS for the post

22
00:01:40,420 --> 00:01:41,010
list.

23
00:01:41,020 --> 00:01:46,870
So I think this one is okay on desktop, but what about on mobile?

24
00:01:46,930 --> 00:01:50,610
If I reduce the browser window, let's have a look.

25
00:01:50,620 --> 00:01:54,040
You can see that it's not all that responsive.

26
00:01:54,070 --> 00:01:57,760
So let's implement the responsive part.

27
00:01:57,970 --> 00:02:02,340
The problem is about the command form.

28
00:02:02,350 --> 00:02:04,060
So let's see.

29
00:02:04,060 --> 00:02:10,940
Let's locate the command, which is this from line number 43 to 51.

30
00:02:10,960 --> 00:02:14,410
If I collapse it, you can see we have it.

31
00:02:14,680 --> 00:02:19,540
So I'm going to decrease the command form from fixed width.

32
00:02:19,690 --> 00:02:22,420
So let's look at the post details.

33
00:02:22,420 --> 00:02:26,560
That's where we have the CSS for the command form.

34
00:02:26,560 --> 00:02:29,290
And this is the post details.

35
00:02:29,590 --> 00:02:34,720
If we scroll down, we're going to have the command form, which is this.

36
00:02:34,720 --> 00:02:38,080
You can see that I'm using fixed weight for that.

37
00:02:38,080 --> 00:02:43,060
So let me remove the fixed width and save it and refresh it.

38
00:02:43,820 --> 00:02:47,600
And you can see that this one looks good than before.

39
00:02:47,630 --> 00:02:52,370
If I decrease, you can see that this one is good.

40
00:02:52,490 --> 00:02:53,690
All right.

41
00:02:53,900 --> 00:02:56,900
That is it about the post details.

42
00:02:57,320 --> 00:02:57,830
All right.

43
00:02:57,830 --> 00:02:59,660
Let's continue in the next video.