Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,560 --> 00:00:04,130
All right, and let's keep working
2
00:00:04,130 --> 00:00:07,883
on the smaller version of the Omnifood project.
3
00:00:09,380 --> 00:00:12,130
Now, first of all, we need to get rid
4
00:00:12,130 --> 00:00:16,020
of this nav-open class in HTML
5
00:00:16,020 --> 00:00:19,243
because by default, of course we don't want it.
6
00:00:20,140 --> 00:00:23,220
So we want the mobile navigation
7
00:00:23,220 --> 00:00:24,883
of course to not be visible.
8
00:00:26,740 --> 00:00:31,190
Okay, so let's go to our very last breakpoint
9
00:00:31,190 --> 00:00:32,920
that we set here.
10
00:00:32,920 --> 00:00:34,683
So that's right here.
11
00:00:36,610 --> 00:00:38,800
So here, everything looks good,
12
00:00:38,800 --> 00:00:43,800
and so let's go down maybe to something like 700, maybe,
13
00:00:44,930 --> 00:00:47,683
just to see if everything is still okay here.
14
00:00:49,300 --> 00:00:53,630
And so here again, everything starts to look really cramped
15
00:00:53,630 --> 00:00:56,285
and it starts to look as if we might need
16
00:00:56,285 --> 00:00:58,410
some more space here.
17
00:00:58,410 --> 00:01:01,480
So some more width for these three columns.
18
00:01:01,480 --> 00:01:02,630
And so maybe it's time
19
00:01:02,630 --> 00:01:07,030
to now give each of these columns here half of the space
20
00:01:07,030 --> 00:01:09,453
and to wrap this one into the next column.
21
00:01:10,670 --> 00:01:13,440
But let's see, so here everything is good
22
00:01:13,440 --> 00:01:16,400
because it has a lot of space now.
23
00:01:16,400 --> 00:01:17,513
Here as well.
24
00:01:18,400 --> 00:01:20,290
And now here, these pricing tables,
25
00:01:20,290 --> 00:01:24,090
they're also starting to get way too thin
26
00:01:24,090 --> 00:01:26,220
and the same probably here.
27
00:01:26,220 --> 00:01:29,620
So this is not looking so good anymore
28
00:01:29,620 --> 00:01:33,603
and yeah, the same thing actually here in the footer.
29
00:01:34,920 --> 00:01:38,293
So let's see if we can reduce it a bit more even,
30
00:01:39,830 --> 00:01:43,790
but yeah, that makes everything even worse
31
00:01:43,790 --> 00:01:48,010
and I think we shouldn't wait until a width like this
32
00:01:48,010 --> 00:01:50,950
in order to fix the problems that we just saw.
33
00:01:50,950 --> 00:01:54,030
So maybe something like 700 is the right width
34
00:01:54,950 --> 00:01:57,223
to start adding a next break point.
35
00:01:59,210 --> 00:02:01,983
All right, so let's do just that.
36
00:02:05,000 --> 00:02:07,803
So still in our queries.css file.
37
00:02:11,280 --> 00:02:16,280
So @media max-width,
38
00:02:16,710 --> 00:02:17,543
and as always,
39
00:02:17,543 --> 00:02:22,340
we need to convert that to em so dividing by 16
40
00:02:22,340 --> 00:02:25,050
and let's round that to 44.
41
00:02:25,050 --> 00:02:29,400
And so 44 is then 704 pixels.
42
00:02:29,400 --> 00:02:31,650
So that looks ideal.
43
00:02:31,650 --> 00:02:36,650
So 44em and then let's just get that standard comments
44
00:02:37,890 --> 00:02:38,913
that we have here.
45
00:02:40,270 --> 00:02:42,313
So this one was for tablets.
46
00:02:44,270 --> 00:02:48,733
And now the next one let's say is like for smaller tablets,
47
00:02:51,640 --> 00:02:55,313
so below 704 pixels.
48
00:02:57,420 --> 00:03:02,420
And here we are of course, missing that block and, okay.
49
00:03:04,030 --> 00:03:06,370
So this is our next media query.
50
00:03:06,370 --> 00:03:09,410
And now let me quickly just go back here
51
00:03:09,410 --> 00:03:11,213
just to show you what I want to do.
52
00:03:12,260 --> 00:03:15,850
So basically, everything that is four and three columns
53
00:03:15,850 --> 00:03:17,200
in our grid.
54
00:03:17,200 --> 00:03:19,363
So this one, for example, is four columns.
55
00:03:20,690 --> 00:03:23,920
This one here is three columns,
56
00:03:23,920 --> 00:03:25,960
and I think that's actually it.
57
00:03:25,960 --> 00:03:28,150
But if we had of course, a bigger page,
58
00:03:28,150 --> 00:03:31,140
then we would reuse those classes more.
59
00:03:31,140 --> 00:03:33,420
And so we would have more and more grids
60
00:03:33,420 --> 00:03:37,330
that had three columns and that had four columns.
61
00:03:37,330 --> 00:03:38,700
But anyway,
62
00:03:38,700 --> 00:03:42,330
what I'm saying is that we will now transform these grids
63
00:03:42,330 --> 00:03:47,270
that have three and four columns to just two columns, right?
64
00:03:47,270 --> 00:03:51,610
And so then we will have basically these two cards here
65
00:03:51,610 --> 00:03:55,200
side-by-side and this list here below that.
66
00:03:55,200 --> 00:03:58,610
And then here, we will end up with a two-by-two grid.
67
00:03:58,610 --> 00:04:01,230
So within two columns and two rows
68
00:04:01,230 --> 00:04:05,323
to accommodate these four features, right?
69
00:04:06,510 --> 00:04:09,683
So let's see here.
70
00:04:10,610 --> 00:04:15,203
And so that's the grid, three cols, entity grid, four cols.
71
00:04:16,130 --> 00:04:18,710
Now this one here we didn't even use.
72
00:04:18,710 --> 00:04:22,103
And well, I'm not deleting it, just commenting it out.
73
00:04:24,940 --> 00:04:26,360
But if we did use it,
74
00:04:26,360 --> 00:04:28,290
then we would also now make this here
75
00:04:28,290 --> 00:04:29,853
into just a two column grid.
76
00:04:33,957 --> 00:04:36,410
Okay, and the same for a four.
77
00:04:36,410 --> 00:04:39,620
And so let's actually copy all of this here as well
78
00:04:40,560 --> 00:04:45,420
and replace the four, of course, with two.
79
00:04:45,420 --> 00:04:46,253
And that's it.
80
00:04:47,720 --> 00:04:49,830
So just one single line of code,
81
00:04:49,830 --> 00:04:52,823
and we have a two-by-two grid here, all of a sudden.
82
00:04:54,000 --> 00:04:57,960
So you'll see that that's a lot better like this.
83
00:04:57,960 --> 00:05:02,377
It has a lot more space and the same probably here, right?
84
00:05:04,640 --> 00:05:07,440
So here we are back to some beautiful cars.
85
00:05:07,440 --> 00:05:09,870
And even if we scale it down a little bit more,
86
00:05:09,870 --> 00:05:11,800
we will still have plenty of space
87
00:05:11,800 --> 00:05:13,630
for all of this content here,
88
00:05:13,630 --> 00:05:18,387
even at a low width of just 500 in a bit, right?
89
00:05:20,380 --> 00:05:23,660
Now here, this just creates visually a small problem
90
00:05:23,660 --> 00:05:28,660
that this would look better if it was centered right here.
91
00:05:28,950 --> 00:05:30,140
Right?
92
00:05:30,140 --> 00:05:33,270
But, well, that shouldn't be too hard.
93
00:05:33,270 --> 00:05:36,633
Let me just inspect this part to show it to you.
94
00:05:38,420 --> 00:05:43,420
So I want to show you the entire grid.
95
00:05:43,760 --> 00:05:46,180
So this is what our grid looks like.
96
00:05:46,180 --> 00:05:50,070
And so all we need to do is to have this column here span
97
00:05:50,070 --> 00:05:51,610
all the way to the end.
98
00:05:51,610 --> 00:05:55,313
So span these two, and then we can simply align the content
99
00:05:55,313 --> 00:05:59,263
that is inside of the cell to the center, right?
100
00:06:00,180 --> 00:06:01,263
So let's do that.
101
00:06:03,640 --> 00:06:06,830
So let's grab the name from here.
102
00:06:06,830 --> 00:06:10,430
So that is called the...
103
00:06:13,550 --> 00:06:15,303
Well, it's actually not here.
104
00:06:17,700 --> 00:06:19,650
Let's see right here in the HTML, then.
105
00:06:21,760 --> 00:06:26,760
So section meals, and meal, and this is the one.
106
00:06:27,300 --> 00:06:32,300
So diets, which we didn't yet select in the style.css
107
00:06:35,130 --> 00:06:38,150
but let's now, of course, manipulate that here.
108
00:06:38,150 --> 00:06:40,890
And so let's do what I just said previously,
109
00:06:40,890 --> 00:06:43,050
which is to span this column
110
00:06:43,050 --> 00:06:45,073
all the way to the end of the grid.
111
00:06:46,410 --> 00:06:49,995
So that is, remember, grid column
112
00:06:49,995 --> 00:06:53,630
and then we can say that it should start at one
113
00:06:53,630 --> 00:06:58,630
all the way to the end which is remember minus one, right?
114
00:06:59,090 --> 00:07:02,030
So for now, that still looks the same,
115
00:07:02,030 --> 00:07:03,643
but now this element here,
116
00:07:05,320 --> 00:07:07,440
so you'll see now it is actually occupying
117
00:07:07,440 --> 00:07:09,030
this entire space.
118
00:07:09,030 --> 00:07:13,503
And so now all we need to do is to say justify-self.
119
00:07:14,790 --> 00:07:18,826
So remember that justify is for the horizontal alignment
120
00:07:18,826 --> 00:07:21,854
and self is because we are setting this now
121
00:07:21,854 --> 00:07:25,970
on the individual grid item and not on the grid container.
122
00:07:25,970 --> 00:07:29,263
And so then we use self and not justify-item.
123
00:07:32,150 --> 00:07:37,150
So let's set that to center and there we go.
124
00:07:39,150 --> 00:07:42,560
And if we now analyze this, then it looks a lot better.
125
00:07:42,560 --> 00:07:45,410
Because this content here is also centered
126
00:07:45,410 --> 00:07:49,713
and yeah, it makes a lot more sense here like this now.
127
00:07:51,240 --> 00:07:53,900
Now, what I'm also noticing is that the spacing here
128
00:07:53,900 --> 00:07:57,910
after the age two is starting to look too big as well.
129
00:07:57,910 --> 00:08:01,933
So this one right here, so let's fix that.
130
00:08:03,270 --> 00:08:05,223
We already have that somewhere up here,
131
00:08:07,240 --> 00:08:10,283
just so I remember also what value we gave it.
132
00:08:11,680 --> 00:08:15,170
So heading secondary and actually all we did was to change
133
00:08:15,170 --> 00:08:18,370
the font size, not the spacing.
134
00:08:18,370 --> 00:08:22,403
So I thought we had done that, but apparently not.
135
00:08:25,720 --> 00:08:30,610
So the heading secondary has a margin bottom of 9.6.
136
00:08:30,610 --> 00:08:34,143
So that's a lot, let's just try to reduce that to half here.
137
00:08:37,140 --> 00:08:40,363
So that's 4.8rem in our system.
138
00:08:42,290 --> 00:08:44,650
Not yet, that looks quite good.
139
00:08:44,650 --> 00:08:47,950
And we could of course fix more and more things,
140
00:08:47,950 --> 00:08:50,150
like make this one here also smaller,
141
00:08:50,150 --> 00:08:52,143
also decrease the spacing here.
142
00:08:53,050 --> 00:08:56,160
And we might do that maybe in the next media query,
143
00:08:56,160 --> 00:08:58,350
but for now I will just leave it like this
144
00:08:58,350 --> 00:09:00,650
because, well, I'm also not trying
145
00:09:00,650 --> 00:09:03,330
to make it 100% perfect here
146
00:09:03,330 --> 00:09:06,330
because this is just a learning project in the end.
147
00:09:06,330 --> 00:09:10,573
So there's no need for it to be 100% perfect, okay?
148
00:09:11,640 --> 00:09:16,640
It just needs to look usable, at least, all right?
149
00:09:17,490 --> 00:09:20,763
So here, everything is still fine, I would say.
150
00:09:22,660 --> 00:09:25,433
Then here, of course, now this looks quite bad.
151
00:09:26,620 --> 00:09:29,890
So it looks bad here, and also,
152
00:09:29,890 --> 00:09:32,810
at this point where we start, actually the break point.
153
00:09:32,810 --> 00:09:36,730
But remember that we need to cover at least like 200 pixels
154
00:09:36,730 --> 00:09:38,940
or 150 at least.
155
00:09:38,940 --> 00:09:43,383
And so, yeah, this would also look at least quite okay here,
156
00:09:44,310 --> 00:09:46,170
which of course it doesn't.
157
00:09:46,170 --> 00:09:48,510
And so remember once again,
158
00:09:48,510 --> 00:09:52,510
if we inspect these pricing plans here,
159
00:09:52,510 --> 00:09:57,510
that we made each of them only 75% white, right?
160
00:09:58,850 --> 00:10:02,780
So if we remove that, then they would be back to 100%.
161
00:10:02,780 --> 00:10:06,970
And so then it does look nice again, right?
162
00:10:06,970 --> 00:10:09,450
And so let's basically do that.
163
00:10:09,450 --> 00:10:13,953
So pricing plan and set the width back to 100%.
164
00:10:20,820 --> 00:10:25,530
So width 100%, and that should do the trick.
165
00:10:25,530 --> 00:10:28,230
Well, here is a typo right?
166
00:10:28,230 --> 00:10:29,063
Pricing plan.
167
00:10:33,140 --> 00:10:34,930
Well, that didn't really work.
168
00:10:34,930 --> 00:10:39,210
Oh, and actually, I already had a typo here before.
169
00:10:39,210 --> 00:10:42,830
so this is called princing-plan everywhere in the HTML
170
00:10:42,830 --> 00:10:44,083
and in the CSS.
171
00:10:45,050 --> 00:10:47,840
So, well, am I gonna fix that?
172
00:10:47,840 --> 00:10:50,283
Yeah, maybe I should fix that.
173
00:10:51,130 --> 00:10:53,463
So let's call it pricing plan here.
174
00:10:54,780 --> 00:10:59,780
So meal, done, princing.
175
00:11:04,650 --> 00:11:06,093
So that was a typo.
176
00:11:07,160 --> 00:11:11,990
The same here, and that's it.
177
00:11:11,990 --> 00:11:16,063
Now, just let's fix it quickly also in the HTML, of course.
178
00:11:17,050 --> 00:11:22,050
So after the gallery, so that's here, and here, and here,
179
00:11:26,050 --> 00:11:30,607
and here, okay, great.
180
00:11:32,260 --> 00:11:33,253
Now that works.
181
00:11:35,440 --> 00:11:37,650
So you see, we reach our break point
182
00:11:37,650 --> 00:11:39,523
and now that is a lot better.
183
00:11:40,690 --> 00:11:43,230
Okay, moving on even further,
184
00:11:43,230 --> 00:11:46,220
and here we start getting some next problems.
185
00:11:46,220 --> 00:11:50,000
Maybe not here yet, but if we take it down even more,
186
00:11:50,000 --> 00:11:52,860
then, actually, this content doesn't even fit at all
187
00:11:52,860 --> 00:11:55,410
and disappears here in the right side.
188
00:11:55,410 --> 00:11:57,412
And now we cannot even scroll there anymore
189
00:11:57,412 --> 00:12:02,412
because we just hit that overflow x in the previous lecture.
190
00:12:02,620 --> 00:12:03,660
Remember that?
191
00:12:03,660 --> 00:12:06,340
And so now it disappears completely,
192
00:12:06,340 --> 00:12:08,290
basically from our page.
193
00:12:08,290 --> 00:12:11,110
So how are we going to fix that?
194
00:12:11,110 --> 00:12:12,990
Well, the idea that I got
195
00:12:12,990 --> 00:12:16,300
is to basically move these three here.
196
00:12:16,300 --> 00:12:20,410
So basically these three and navigation columns to the top.
197
00:12:20,410 --> 00:12:23,390
So I have them first here and then after that
198
00:12:23,390 --> 00:12:26,400
I will want the logo column here
199
00:12:26,400 --> 00:12:29,850
and the contact data the column below that.
200
00:12:29,850 --> 00:12:34,070
However, that sounds easier at first than it actually is.
201
00:12:34,070 --> 00:12:37,150
Because I still want these two columns here
202
00:12:37,150 --> 00:12:40,640
to have the same width and I still want these three here
203
00:12:40,640 --> 00:12:42,273
to also have the same width.
204
00:12:43,330 --> 00:12:47,010
So we cannot simply define a grid with three columns
205
00:12:47,010 --> 00:12:50,030
because that would only work for these three
206
00:12:50,030 --> 00:12:52,170
but not for these two.
207
00:12:52,170 --> 00:12:54,530
And let me actually show you that in practice
208
00:12:54,530 --> 00:12:57,280
because that makes it easier to understand the problem.
209
00:12:58,690 --> 00:13:03,230
So here in the footer,
210
00:13:03,230 --> 00:13:07,653
right now we have this grid with five columns.
211
00:13:08,600 --> 00:13:10,050
So let's grab this here
212
00:13:11,740 --> 00:13:14,773
and change it just to three columns for now.
213
00:13:17,610 --> 00:13:21,030
All right, so that makes it look like this.
214
00:13:21,030 --> 00:13:23,200
But remember how we want these three here
215
00:13:23,200 --> 00:13:26,780
to actually be the first three columns.
216
00:13:26,780 --> 00:13:29,360
Or in other words, we want these three here
217
00:13:29,360 --> 00:13:32,860
to be in the first row, right?
218
00:13:32,860 --> 00:13:37,060
So we can do that because we actually gave them a class
219
00:13:39,470 --> 00:13:42,330
while we didn't select it here apparently,
220
00:13:42,330 --> 00:13:46,013
but there is a class name there, I remember.
221
00:13:48,390 --> 00:13:50,033
So let's move down there.
222
00:13:52,730 --> 00:13:55,520
Yeah, so here we have the address-col
223
00:13:56,660 --> 00:13:59,897
and then here we have the three nav-cols, right?
224
00:14:02,710 --> 00:14:05,333
So nav-col, nav-col, and nav-col.
225
00:14:06,180 --> 00:14:09,453
So again, I think we don't have them selected anywhere here.
226
00:14:11,550 --> 00:14:14,303
Nope, but let's do that now here.
227
00:14:15,650 --> 00:14:17,310
And so what I said previously,
228
00:14:17,310 --> 00:14:19,880
is that we want them to be in the first row.
229
00:14:19,880 --> 00:14:24,880
And so we can, for all of them say a grid row one, right?
230
00:14:25,450 --> 00:14:27,500
And that's actually it.
231
00:14:27,500 --> 00:14:29,400
And so now they are right here
232
00:14:29,400 --> 00:14:33,430
beautifully sitting at the top, one column for each of them.
233
00:14:33,430 --> 00:14:36,120
And then these two here below them.
234
00:14:36,120 --> 00:14:39,600
However, that is again, not exactly what we want.
235
00:14:39,600 --> 00:14:42,110
Because now we want these two here
236
00:14:42,110 --> 00:14:45,360
to basically occupy the remaining space.
237
00:14:45,360 --> 00:14:48,610
However, there is only one grid cell left here
238
00:14:48,610 --> 00:14:49,713
on the right side.
239
00:14:52,170 --> 00:14:57,170
Well, not this one here, but here.
240
00:14:57,440 --> 00:14:59,570
So you only have one grid cell left,
241
00:14:59,570 --> 00:15:03,660
which we cannot really split up for half here
242
00:15:03,660 --> 00:15:05,630
and half here, right?
243
00:15:05,630 --> 00:15:07,130
That does not work.
244
00:15:07,130 --> 00:15:08,880
And so what we need to do instead
245
00:15:08,880 --> 00:15:11,690
is to create a grid with six columns.
246
00:15:11,690 --> 00:15:15,000
And then we have each of these columns here
247
00:15:15,000 --> 00:15:17,200
to span across two columns.
248
00:15:17,200 --> 00:15:20,470
And these two here span across three columns.
249
00:15:20,470 --> 00:15:22,990
And so that will then fix it.
250
00:15:22,990 --> 00:15:25,940
So that's a trick that we actually have to do all the time
251
00:15:25,940 --> 00:15:29,500
when we built a kind of an asymmetric grid,
252
00:15:29,500 --> 00:15:31,253
like what we're going for here.
253
00:15:33,060 --> 00:15:35,680
So let me show you what I mean here.
254
00:15:35,680 --> 00:15:39,010
So let's use actually the repeat function.
255
00:15:39,010 --> 00:15:42,163
So repeat six time, 1fr,
256
00:15:43,430 --> 00:15:46,513
and so for now, of course, that looks like this,
257
00:15:47,460 --> 00:15:50,645
but now, here we will say that we want each of them
258
00:15:50,645 --> 00:15:54,400
to be in grid column.
259
00:15:54,400 --> 00:15:57,893
And then here we can simply say, span across two.
260
00:15:59,330 --> 00:16:04,330
All right, and that did already work,
261
00:16:04,660 --> 00:16:07,440
even though it doesn't look like it.
262
00:16:07,440 --> 00:16:10,120
So now here we have this empty one.
263
00:16:10,120 --> 00:16:13,820
So, you'll see that this one here
264
00:16:13,820 --> 00:16:17,840
is spanning across these two, and these two, and these two.
265
00:16:17,840 --> 00:16:20,920
They simply do not have the same width right now,
266
00:16:20,920 --> 00:16:21,900
these columns,
267
00:16:21,900 --> 00:16:25,690
because the content down here does not allow for that.
268
00:16:25,690 --> 00:16:27,563
So let's fix that very quick.
269
00:16:28,470 --> 00:16:32,740
And so what I want is to select the logo-col
270
00:16:32,740 --> 00:16:37,693
and also the other one, so the address-col.
271
00:16:41,520 --> 00:16:45,820
So logo-col and this one here,
272
00:16:45,820 --> 00:16:50,820
we want them to span across three columns.
273
00:16:51,150 --> 00:16:52,833
So span three.
274
00:16:53,740 --> 00:16:57,403
Let's inspect that and beautiful.
275
00:16:58,370 --> 00:17:03,370
Let's actually turn this view off and just reload
276
00:17:04,230 --> 00:17:05,890
and there we go.
277
00:17:05,890 --> 00:17:10,870
And so now this is exactly what we were going for, right?
278
00:17:10,870 --> 00:17:14,930
So these two are now basically sharing half the space here
279
00:17:14,930 --> 00:17:18,463
while these other three are sharing the space up here.
280
00:17:19,470 --> 00:17:22,240
There's just not enough space here right now.
281
00:17:22,240 --> 00:17:25,190
So we could go ahead and increase the gap,
282
00:17:25,190 --> 00:17:27,993
but that gap is actually coming from somewhere else.
283
00:17:30,760 --> 00:17:32,870
So it is coming from the grid itself.
284
00:17:32,870 --> 00:17:35,660
And so I do not want to mess with that.
285
00:17:35,660 --> 00:17:37,470
So let me simply add some margin
286
00:17:37,470 --> 00:17:39,913
to the bottom of these three.
287
00:17:40,850 --> 00:17:45,230
So that's your 3.2rem, maybe.
288
00:17:50,580 --> 00:17:52,080
And that's a bit better.
289
00:17:52,080 --> 00:17:54,490
So before everything looked a bit cramped
290
00:17:54,490 --> 00:17:58,473
and we didn't have enough space around this logo there.
291
00:17:59,890 --> 00:18:01,840
Okay, great.
292
00:18:01,840 --> 00:18:04,040
So that actually, it looks really nice
293
00:18:04,040 --> 00:18:06,023
even at this lower width.
294
00:18:08,020 --> 00:18:10,280
So this is really a great footer.
295
00:18:10,280 --> 00:18:15,260
It still looks professionally designed, right?
296
00:18:15,260 --> 00:18:17,320
Now, here maybe not so good anymore
297
00:18:17,320 --> 00:18:20,040
but we're also getting ahead of ourselves.
298
00:18:20,040 --> 00:18:22,900
All we did here was to work on this break point.
299
00:18:22,900 --> 00:18:27,500
And so that works good during all of this width here.
300
00:18:27,500 --> 00:18:32,500
So all the way down, for example, to 600, right?
301
00:18:33,040 --> 00:18:34,520
So well done here,
302
00:18:34,520 --> 00:18:38,370
we're doing a great job of making this page responsive.
303
00:18:38,370 --> 00:18:41,900
And I think we will only need one more break point here
304
00:18:41,900 --> 00:18:44,500
to really finish this part.
305
00:18:44,500 --> 00:18:48,580
So only a break point for smaller phones are now missing.
306
00:18:48,580 --> 00:18:52,210
And so that is exactly what we're going to add in the next
307
00:18:52,210 --> 00:18:54,163
and final lecture of this section.
22993
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.