1
00:00:09,050 --> 00:00:10,130
In this video.

2
00:00:10,130 --> 00:00:17,450
Let's finish up the responsiveness of this content, meaning that on desktop you want to have two columns,

3
00:00:17,480 --> 00:00:21,170
but on mobile you want to have one column as this.

4
00:00:21,170 --> 00:00:22,710
So let's continue.

5
00:00:22,820 --> 00:00:30,210
So back to the CSS part of this component that is inside ERS CRC, then services that CSS.

6
00:00:30,230 --> 00:00:36,230
So down here, let's have a beautiful comment and say media query.

7
00:00:38,150 --> 00:00:51,470
The next step is we bring in the X media and if the minimum weight is seven, six, eight, six, then

8
00:00:51,470 --> 00:00:54,530
we want to change the services list container.

9
00:00:54,530 --> 00:01:05,120
So here let's bring in the class name of services list container and display as flex.

10
00:01:05,120 --> 00:01:08,360
So let's save it and this is what we have.

11
00:01:08,360 --> 00:01:15,260
So the next step is that I want to reduce the width of this one and then increase the width of the services

12
00:01:15,260 --> 00:01:15,830
list.

13
00:01:15,830 --> 00:01:18,530
So let's finish up with the list container.

14
00:01:18,530 --> 00:01:26,000
So here, let's put everything at the center and then let's add just file contain to have some space

15
00:01:26,000 --> 00:01:26,810
between.

16
00:01:28,250 --> 00:01:28,880
Great.

17
00:01:28,910 --> 00:01:29,870
Now, let's see.

18
00:01:30,150 --> 00:01:36,140
I think this bucket now the next step is that let's decrease the weight of this one.

19
00:01:36,290 --> 00:01:44,780
And this is a class dot services description container and let's change the weight to 40%.

20
00:01:47,360 --> 00:01:49,200
Now let's see what we're going to have.

21
00:01:49,220 --> 00:01:51,470
And indeed, this is what we have.

22
00:01:51,500 --> 00:01:56,970
The next step is that let's also change the weight of the item to 60%.

23
00:01:56,990 --> 00:02:01,280
So let's go ahead and select the service item container.

24
00:02:01,310 --> 00:02:14,720
We're going to be asked service dash item, dash container and change the weight to 60%.

25
00:02:15,500 --> 00:02:16,940
Now, let's see.

26
00:02:17,240 --> 00:02:19,730
Yeah, something like this.

27
00:02:19,850 --> 00:02:25,940
The next step is that I want to decrease the weight of this once inside it as an item.

28
00:02:25,940 --> 00:02:27,710
So here we go.

29
00:02:27,830 --> 00:02:36,800
Next step is I will select the services item that is the individual and inside the container dash item.

30
00:02:37,130 --> 00:02:42,980
And I want to have a width of 80% now with this one.

31
00:02:42,980 --> 00:02:44,060
Let's have a look.

32
00:02:44,090 --> 00:02:48,440
Yeah, something like this as compared to the final one.

33
00:02:48,560 --> 00:02:53,840
So on mobile we're going to have one color and on next top are going to have two columns.

34
00:02:53,840 --> 00:02:55,640
And this is what I want.