1
00:00:00,630 --> 00:00:06,390
In this video, we are going to improve the CSS part of the application.

2
00:00:06,390 --> 00:00:09,080
So it's going to be optional video.

3
00:00:09,090 --> 00:00:17,390
But before we get into that, let's change the title of the project from responsive design to look up

4
00:00:17,400 --> 00:00:21,930
so inside the views, and that is index dot edges.

5
00:00:21,960 --> 00:00:28,830
Let's change from this to blog up and we have it as that.

6
00:00:29,160 --> 00:00:32,070
The next part is going to be the photo.

7
00:00:32,070 --> 00:00:40,770
You can see that on the desktop it looks good, but on the mobile parts you can see that it's been clustered

8
00:00:40,770 --> 00:00:41,700
as that.

9
00:00:41,880 --> 00:00:46,950
But before we get into that, let's see how the CSS is being used.

10
00:00:47,220 --> 00:00:51,690
Remember that we are using the partials for the footer.

11
00:00:51,690 --> 00:01:02,460
Likewise the nav bar and for the assets for the footer is part of the entire CSS that is tied to CSS.

12
00:01:02,460 --> 00:01:06,900
So let's put the case of the footer on a different file.

13
00:01:06,900 --> 00:01:13,950
So if you go to the CSS folder, let's create one called footer dot CSS.

14
00:01:16,990 --> 00:01:24,490
And what you want to do is that if you go to the style, that's where we have the Fortas case and start

15
00:01:24,490 --> 00:01:26,810
from here called for trial.

16
00:01:26,830 --> 00:01:35,560
So I'm going to select all the photo cases and scroll down and up to here.

17
00:01:35,890 --> 00:01:44,200
Let me cut it from here and let me put it on the case of the footer and let me save this one for this

18
00:01:44,200 --> 00:01:44,620
one.

19
00:01:44,620 --> 00:01:48,800
When I refer to it, you can see that the case would be no more.

20
00:01:48,820 --> 00:01:53,520
So let's go ahead and then require the case for the photo holding.

21
00:01:53,770 --> 00:01:57,520
So let's get back to the future and inside partials.

22
00:01:57,520 --> 00:01:59,200
And here is a footer.

23
00:01:59,200 --> 00:02:04,450
And let's go ahead and require the CSS for the footer as link.

24
00:02:04,480 --> 00:02:10,750
The path is for us large ccis for slash footer, dot ccis.

25
00:02:10,990 --> 00:02:12,340
So save it.

26
00:02:12,340 --> 00:02:18,760
And let's refresh the application and let's see you can see that is being applied.

27
00:02:18,760 --> 00:02:25,690
But on the mobile view, let's decrease the font size of the logo text.

28
00:02:25,960 --> 00:02:28,780
So let's look at this text.

29
00:02:28,780 --> 00:02:35,860
So back to the footer and this is what I'm referring to, which is Novatek and then the block.

30
00:02:35,860 --> 00:02:39,280
So let's target the logo dot text.

31
00:02:39,400 --> 00:02:48,790
So inside the footer, let's locate that logo dot text, which is this Let me change from 4.5 to 3.

32
00:02:50,060 --> 00:02:51,830
And it's okay.

33
00:02:51,860 --> 00:02:56,150
The next one is going to be the paragraph.

34
00:02:56,150 --> 00:03:05,720
So let's trace the tack, which is this, so I can go ahead and target the logo text and then P So let's

35
00:03:05,720 --> 00:03:09,530
see if we have the selector and we have it as that.

36
00:03:09,530 --> 00:03:13,910
So I want to push everything at the center and save it.

37
00:03:13,910 --> 00:03:15,050
And let's have a look.

38
00:03:16,110 --> 00:03:24,630
And indeed it is at the center of the page and I can give it font size of, say, 18 pixels.

39
00:03:25,540 --> 00:03:30,200
And this one is, okay, let's have some pattern around it.

40
00:03:30,220 --> 00:03:32,910
So pattern as ten picks.

41
00:03:33,250 --> 00:03:34,060
Let's see.

42
00:03:36,760 --> 00:03:37,330
All right.

43
00:03:37,330 --> 00:03:38,350
It's okay.

44
00:03:38,380 --> 00:03:40,930
Let's view it on desktop and let's see.

45
00:03:42,180 --> 00:03:44,520
Yeah, it's okay for my likeness.

46
00:03:44,940 --> 00:03:48,950
So let's target the icons also.

47
00:03:48,960 --> 00:03:50,880
So let's look at the structure.

48
00:03:51,570 --> 00:03:54,130
Which is the eye tag.

49
00:03:54,150 --> 00:03:56,910
So let's trace the eye tag.

50
00:03:57,060 --> 00:04:02,220
So scroll down and this is the eye tag for the contact.

51
00:04:02,250 --> 00:04:04,830
Let me change from 30 to 20.

52
00:04:05,190 --> 00:04:13,310
Likewise, the length tag from 30 to 20 and then for the sutures to from 30 to 20.

53
00:04:13,320 --> 00:04:14,700
And let's see.

54
00:04:17,450 --> 00:04:19,170
And this one is.

55
00:04:19,190 --> 00:04:20,029
Okay.

56
00:04:20,149 --> 00:04:23,850
So that is it about the case for a full trial.

57
00:04:23,870 --> 00:04:31,400
And on Dexter, you can increase the font of the text, but I think this one is okay for now.

58
00:04:31,580 --> 00:04:38,180
In the next video, let's work on the post details so you can see that this one is okay.

59
00:04:38,210 --> 00:04:43,970
But on mobile, you can see that it's being clustered around as that.