1
00:00:00,000 --> 00:00:01,970
All right, so let's
take a look at making

2
00:00:01,965 --> 00:00:04,305
the homepage or responsive.

3
00:00:04,305 --> 00:00:07,085
And for the most parts,

4
00:00:07,080 --> 00:00:09,380
it's actually not that bad.

5
00:00:09,375 --> 00:00:12,135
This is for the tablet view.

6
00:00:12,135 --> 00:00:17,165
Obviously we can make the
headline a little bit smaller.

7
00:00:17,160 --> 00:00:22,950
Make the banana also a little
bit shorter in height.

8
00:00:22,950 --> 00:00:23,760
Right here.

9
00:00:23,760 --> 00:00:27,240
Of course, we can add some
padding to the ball off to

10
00:00:27,240 --> 00:00:28,980
travel section as well as

11
00:00:28,980 --> 00:00:31,380
teachable to best
proceed section as well.

12
00:00:31,380 --> 00:00:33,090
But I think that's all
we need to do because

13
00:00:33,090 --> 00:00:35,350
the rest is actually quite good.

14
00:00:35,350 --> 00:00:38,050
The unique channel design
section looks fine.

15
00:00:38,045 --> 00:00:39,515
The gallery is fine.

16
00:00:39,515 --> 00:00:42,045
Visits, our blog
section is fine.

17
00:00:42,049 --> 00:00:45,519
It doesn't packages
reviews, all fine.

18
00:00:45,514 --> 00:00:49,324
However, for the mobile view,

19
00:00:49,325 --> 00:00:53,395
which is what we have
arrived here, obviously,

20
00:00:53,390 --> 00:00:56,990
we're going to have to
make the text much,

21
00:00:56,990 --> 00:00:59,410
much, much smaller
as you can see.

22
00:00:59,405 --> 00:01:04,105
Also add padding in here as
well for the travel section.

23
00:01:04,100 --> 00:01:06,340
And we need to do
something about the fact

24
00:01:06,335 --> 00:01:08,575
that we do have

25
00:01:08,570 --> 00:01:10,670
the two images for

26
00:01:10,670 --> 00:01:13,970
the second section lining

27
00:01:13,970 --> 00:01:16,100
up next to each other
ideally should be,

28
00:01:16,100 --> 00:01:18,020
I will love to travel.

29
00:01:18,020 --> 00:01:21,080
Then this image and
then our children,

30
00:01:21,080 --> 00:01:23,870
the best places, and then
the image of this mountain.

31
00:01:23,870 --> 00:01:26,090
So we're gonna have to do
something about it as well.

32
00:01:26,090 --> 00:01:28,150
Other than that, the rest

33
00:01:28,145 --> 00:01:30,505
of the page looks quite
good to consider.

34
00:01:30,500 --> 00:01:35,600
The gallery is now one
single row, which is fine.

35
00:01:35,600 --> 00:01:40,240
The blog section is also
one single row as well.

36
00:01:40,235 --> 00:01:42,875
I want a 22 rows, I'm sorry.

37
00:01:42,875 --> 00:01:46,285
Then it doesn't packages
reviews all now and

38
00:01:46,280 --> 00:01:48,320
the own separate column
and then also produce as

39
00:01:48,320 --> 00:01:50,470
you can see, that at.

40
00:01:50,465 --> 00:01:51,865
All. Right, so let's
go ahead and begin

41
00:01:51,860 --> 00:01:53,390
to make the changes.

42
00:01:53,390 --> 00:01:56,040
So let's edit with Elementor.

43
00:01:56,044 --> 00:01:58,834
We're going to handle the
banner first because that's the

44
00:01:58,835 --> 00:02:01,835
that's the main That's
the main issue.

45
00:02:01,835 --> 00:02:06,385
Alright. Responsive tablets.

46
00:02:06,380 --> 00:02:09,010
What do we have here?

47
00:02:09,005 --> 00:02:11,575
We're gonna go ahead
now and edit the text.

48
00:02:11,570 --> 00:02:15,830
And the text was
about 120 pixels.

49
00:02:15,830 --> 00:02:17,200
As you can see.

50
00:02:17,195 --> 00:02:19,735
We're gonna have two
big break this down,

51
00:02:19,730 --> 00:02:22,010
just a little bit much smaller.

52
00:02:22,010 --> 00:02:25,000
So let's say 88 pixels wide.

53
00:02:24,995 --> 00:02:30,755
But don't forget that we set
a height for the section.

54
00:02:30,755 --> 00:02:33,565
Let's go over to this
section right now.

55
00:02:33,560 --> 00:02:36,200
We have the minimum height here.

56
00:02:36,200 --> 00:02:39,740
We're going to reduce
this as much as we can.

57
00:02:39,740 --> 00:02:41,230
Don't worry about
the text overlapping

58
00:02:41,225 --> 00:02:43,085
the header for now.

59
00:02:43,085 --> 00:02:45,025
But let's try to give
you a reasonable

60
00:02:45,020 --> 00:02:46,580
height for the table.

61
00:02:46,580 --> 00:02:47,630
And I think 519, my baby,

62
00:02:47,630 --> 00:02:51,170
too small, let's
say seven hundred.

63
00:02:51,170 --> 00:02:54,310
Seven hundred seems fine enough.

64
00:02:54,305 --> 00:02:56,845
Then from here,
don't forget that we

65
00:02:56,840 --> 00:02:59,260
also give it a negative
margins as well.

66
00:02:59,255 --> 00:03:02,995
Now that we've reduced the
size from one hundred,

67
00:03:02,990 --> 00:03:05,750
ten hundred to 700
women as well also go

68
00:03:05,750 --> 00:03:08,890
to Advanced invite here.

69
00:03:08,885 --> 00:03:10,825
Don't be fooled by the
fact that you don't see

70
00:03:10,820 --> 00:03:12,940
anything inside
the margin boxes.

71
00:03:12,935 --> 00:03:14,785
It's actually
inheriting the margins

72
00:03:14,780 --> 00:03:18,290
from the desktop view.

73
00:03:18,290 --> 00:03:23,260
So here, let's go ahead now
and try to reduce this.

74
00:03:23,255 --> 00:03:25,285
Oh sorry, I forgot to unlink.

75
00:03:25,280 --> 00:03:28,070
Let's make this 10.

76
00:03:28,070 --> 00:03:31,760
All right. I'm gonna
keep on going up again.

77
00:03:31,760 --> 00:03:34,510
This should be about,
let me just give it

78
00:03:34,505 --> 00:03:41,215
150 minus, okay,
I can't do that.

79
00:03:41,210 --> 00:03:42,320
Let me just try this.

80
00:03:42,320 --> 00:03:44,660
Minus 150.

81
00:03:44,660 --> 00:03:46,540
Okay? I think that's
a bit too much.

82
00:03:46,535 --> 00:03:48,055
Let's go down.

83
00:03:48,050 --> 00:03:48,670
Let's go down.

84
00:03:48,665 --> 00:03:50,035
Okay, So it should be

85
00:03:50,030 --> 00:03:52,490
around 123 leisure speaker

86
00:03:52,490 --> 00:03:55,740
one twenty five,
twenty five pixels.

87
00:03:55,739 --> 00:03:58,769
Now for the text
itself or the header,

88
00:03:58,765 --> 00:04:02,955
we could make this a
little bit smaller again.

89
00:04:02,950 --> 00:04:04,450
And that's it.

90
00:04:04,450 --> 00:04:04,900
What do you think?

91
00:04:04,900 --> 00:04:09,010
I think this is fine. 80
pixels for the header.

92
00:04:09,010 --> 00:04:12,730
Reduce the height of this
section to 700 pixels,

93
00:04:12,730 --> 00:04:14,640
reduced negative margin as well.

94
00:04:14,635 --> 00:04:20,375
And I think this is fine,
although be careful,

95
00:04:20,379 --> 00:04:22,959
do you see right now
that if we expanded

96
00:04:22,960 --> 00:04:26,610
the table to the
maximum screen size,

97
00:04:26,605 --> 00:04:28,935
you can see we now have
the whitespace showing up.

98
00:04:28,930 --> 00:04:30,220
So that should tell us right now

99
00:04:30,220 --> 00:04:32,080
that all okay, hold on a second.

100
00:04:32,080 --> 00:04:34,780
We need to increase
the negative imagines,

101
00:04:34,780 --> 00:04:37,860
actually, that's another thing
you should be a well-off.

102
00:04:37,859 --> 00:04:39,199
Whenever you are applying

103
00:04:39,200 --> 00:04:41,140
negative margins and
responsive mode,

104
00:04:41,135 --> 00:04:43,885
make sure you are
applying negative margins

105
00:04:43,880 --> 00:04:47,030
to the biggest screen
size possible.

106
00:04:47,029 --> 00:04:49,209
This is the biggest
concise as possible for

107
00:04:49,205 --> 00:04:52,045
the tilted view at 1024 by 878,

108
00:04:52,040 --> 00:04:53,840
we're going to increase,

109
00:04:53,840 --> 00:04:57,710
or rather in this case
reduce the negative margin.

110
00:04:57,710 --> 00:04:59,360
Because when you
are negative we are

111
00:04:59,360 --> 00:05:03,550
reducing that. It's all 158.

112
00:05:03,545 --> 00:05:06,495
Just about does It's, so now,

113
00:05:06,499 --> 00:05:10,519
if we bring this down to the
smallest size for tablet,

114
00:05:10,520 --> 00:05:13,880
we're still not gonna
see any white space.

115
00:05:13,880 --> 00:05:16,010
And that's that.

116
00:05:16,010 --> 00:05:19,850
Okay, I think this is
fine for the tablet.

117
00:05:19,850 --> 00:05:21,890
Let's now make some changes to

118
00:05:21,890 --> 00:05:23,960
the first or the second section.

119
00:05:23,960 --> 00:05:27,410
And this gives right now,
what do we need to do?

120
00:05:27,410 --> 00:05:30,230
For the tablets? We
can add some padding.

121
00:05:30,230 --> 00:05:32,920
Alright, we're going to go
in here and it's section.

122
00:05:32,915 --> 00:05:34,885
Let's go to Advanced.

123
00:05:34,880 --> 00:05:38,380
And right here, let's
just add some padding.

124
00:05:38,375 --> 00:05:41,125
We can go to the
usual 25 pixels and

125
00:05:41,120 --> 00:05:45,210
then an effect pixels
for the bottom as well.

126
00:05:45,214 --> 00:05:47,424
Let's cool down here.

127
00:05:47,420 --> 00:05:50,350
We'll do the exact same
thing in here as well.

128
00:05:50,345 --> 00:05:53,405
I'm going to show you
something really cool.

129
00:05:53,405 --> 00:05:56,365
25 pixels from the top and

130
00:05:56,360 --> 00:05:59,690
then 25 pixels from
the bottom as well.

131
00:05:59,690 --> 00:06:02,830
I, now, if you look at this,

132
00:06:02,825 --> 00:06:06,655
you'll realize that it actually
doesn't look that great.

133
00:06:06,650 --> 00:06:09,100
I mean, you've got an
image right here ball,

134
00:06:09,095 --> 00:06:13,295
the texts, the texts column
is a little bit too large.

135
00:06:13,295 --> 00:06:15,245
It's a little bit too tall.

136
00:06:15,245 --> 00:06:18,185
Awesome goes with the
second section as well.

137
00:06:18,185 --> 00:06:20,735
So what exactly can we do?

138
00:06:20,735 --> 00:06:23,195
The simplest thing we could
do would be to simply

139
00:06:23,195 --> 00:06:26,815
make each column go
a 100% in width.

140
00:06:26,810 --> 00:06:28,460
So instead of having
two columns will

141
00:06:28,460 --> 00:06:30,580
have to come side-by-side.

142
00:06:30,575 --> 00:06:33,425
We'll have two columns
on top of each other.

143
00:06:33,425 --> 00:06:35,935
So as an example, right here,

144
00:06:35,930 --> 00:06:38,500
if I gave this first
column in here,

145
00:06:38,495 --> 00:06:39,985
we're just going to
give this one or

146
00:06:39,980 --> 00:06:43,180
one hundred, one hundred.

147
00:06:43,175 --> 00:06:48,875
And then we're gonna give
this column and also 100.

148
00:06:48,875 --> 00:06:50,245
And there it is.

149
00:06:50,240 --> 00:06:52,730
Right now, even if we expand to

150
00:06:52,730 --> 00:06:55,990
the biggest possible
size on a tablet,

151
00:06:55,985 --> 00:06:57,515
I think it looks okay.

152
00:06:57,515 --> 00:06:58,975
This looks fine on a tip,

153
00:06:58,970 --> 00:07:01,150
but just make sure the
images are large enough.

154
00:07:01,145 --> 00:07:02,515
One change would just need to

155
00:07:02,510 --> 00:07:03,740
do right here would be to add

156
00:07:03,740 --> 00:07:06,850
some padding to this
Learn More button.

157
00:07:06,845 --> 00:07:08,545
I'm going to click
in there, go to

158
00:07:08,540 --> 00:07:12,490
advanced pattern and the
Buddhists add at the bottom.

159
00:07:12,485 --> 00:07:15,575
We'll add some padding in here.

160
00:07:15,575 --> 00:07:19,915
Let me say 25 pixels might
be a little bit too much.

161
00:07:19,910 --> 00:07:23,160
In this case, maybe 15 pixels.

162
00:07:23,164 --> 00:07:24,784
15 pixels is fine.

163
00:07:24,785 --> 00:07:25,805
And there it is.

164
00:07:25,805 --> 00:07:30,395
Okay, let's do the exact same
theme symptom here as well.

165
00:07:30,395 --> 00:07:32,905
I'm going to click on
this column right here.

166
00:07:32,900 --> 00:07:36,860
The goto, the column width.

167
00:07:36,860 --> 00:07:39,020
I'm going to give it a 100.

168
00:07:39,020 --> 00:07:44,270
And then the second column
in here as well, 100.

169
00:07:44,270 --> 00:07:47,360
Okay, and then take
a look at this.

170
00:07:47,360 --> 00:07:50,540
Ideally we want to
have this column right

171
00:07:50,540 --> 00:07:54,190
here on top of this column.

172
00:07:54,185 --> 00:07:57,005
How do we do that?

173
00:07:57,005 --> 00:08:01,775
Well, we're going to do is to
simply go to this section,

174
00:08:01,775 --> 00:08:03,145
holding these two columns,

175
00:08:03,140 --> 00:08:06,970
go to section, go over
here to Advanced.

176
00:08:06,965 --> 00:08:09,745
Any right here on
the responsive.

177
00:08:09,740 --> 00:08:14,210
You're going to see this
option to reverse the columns.

178
00:08:14,210 --> 00:08:16,430
We're gonna do that on tablet.

179
00:08:16,430 --> 00:08:18,620
We're gonna do that
and mobile as well.

180
00:08:18,620 --> 00:08:20,870
Now you can see that the child,

181
00:08:20,870 --> 00:08:25,090
the best versus column is
now on top of the mountain.

182
00:08:25,085 --> 00:08:28,055
And that's exactly
how to do that.

183
00:08:28,055 --> 00:08:29,815
I'm just gonna go ahead
and add some padding

184
00:08:29,810 --> 00:08:32,150
to the landlord button in here.

185
00:08:32,150 --> 00:08:37,550
Padding at the
bottom, 2515 pixels.

186
00:08:37,550 --> 00:08:40,820
I believe it was an M&A is okay,

187
00:08:40,820 --> 00:08:42,080
so let's go back on top.

188
00:08:42,080 --> 00:08:44,080
Scroll down.

189
00:08:44,075 --> 00:08:45,445
K.

190
00:08:45,440 --> 00:08:48,460
We got plenty of spaces.

191
00:08:48,455 --> 00:08:51,305
All righty.

192
00:08:51,305 --> 00:08:54,625
Okay, Looking good,
looking good.

193
00:08:54,620 --> 00:08:57,110
Now let's try to
reduce the size to the

194
00:08:57,110 --> 00:09:00,200
smallest and see if
there's anything

195
00:09:00,200 --> 00:09:07,330
we need to do in
here. It looks okay.

196
00:09:07,325 --> 00:09:10,795
Looks perfectly fine.

197
00:09:10,790 --> 00:09:14,540
And there it is. Okay.

198
00:09:14,540 --> 00:09:18,120
That's it for the tablet view.

199
00:09:18,124 --> 00:09:21,564
What about the mobile view?

200
00:09:21,560 --> 00:09:24,720
Let's switch to mobile.

201
00:09:25,600 --> 00:09:28,220
Alright, so obviously
the banana in here,

202
00:09:28,220 --> 00:09:30,290
we'll need to fix that one.

203
00:09:30,290 --> 00:09:32,090
Well, I'm just quickly
scroll down in here and

204
00:09:32,090 --> 00:09:34,160
see the rest of the page.

205
00:09:34,160 --> 00:09:36,760
The rest of the page looks
actually quite good.

206
00:09:36,755 --> 00:09:38,395
Yep, This looks good.

207
00:09:38,390 --> 00:09:40,340
Everything is now in
one single column in

208
00:09:40,340 --> 00:09:44,010
which we've used in one column,

209
00:09:44,014 --> 00:09:46,024
and then the Contact page.

210
00:09:46,025 --> 00:09:47,605
So all we need to do
right now we'd be

211
00:09:47,600 --> 00:09:49,430
to handle the banner.

212
00:09:49,430 --> 00:09:52,760
So let's do this. I'm
going to scroll up here.

213
00:09:52,760 --> 00:09:56,240
Let's go over to the section.

214
00:09:56,240 --> 00:09:58,190
All right, The first thing
we will do right now

215
00:09:58,190 --> 00:10:00,580
is for the heights.

216
00:10:00,575 --> 00:10:03,025
It's a minimum
height, 700 pixels.

217
00:10:03,020 --> 00:10:05,360
This is of course inherited
from the tablet view.

218
00:10:05,360 --> 00:10:07,970
Let's see if we
can actually maybe

219
00:10:07,970 --> 00:10:10,760
increase the size a little bit.

220
00:10:10,760 --> 00:10:12,420
Actually.

221
00:10:13,600 --> 00:10:17,780
I think 879, Let's try to
get something a little bit,

222
00:10:17,780 --> 00:10:21,020
even like 870 pixels maybe.

223
00:10:21,020 --> 00:10:26,720
Let's try to increase
the size a little bit to

224
00:10:26,720 --> 00:10:31,880
the largest size for
the mobile view.

225
00:10:31,880 --> 00:10:33,650
Now you would notice that there

226
00:10:33,650 --> 00:10:35,270
is a little bit too much
of a negative margin

227
00:10:35,270 --> 00:10:37,130
because you can see
the blue line and you

228
00:10:37,130 --> 00:10:39,110
can see the logo
are shown up above.

229
00:10:39,110 --> 00:10:40,670
So what we're gonna have to do

230
00:10:40,670 --> 00:10:42,710
right now is to go to Advanced.

231
00:10:42,709 --> 00:10:46,329
And then for the
negative margins,

232
00:10:46,325 --> 00:10:50,215
let's try to, actually,

233
00:10:50,210 --> 00:10:52,070
we don't need it in
any negative margins.

234
00:10:52,070 --> 00:10:54,230
Actually was gonna make it 0.

235
00:10:54,230 --> 00:10:55,850
Yeah, Let's just
make it 0 since we

236
00:10:55,850 --> 00:10:57,170
have a blackout
background anyway.

237
00:10:57,170 --> 00:10:59,750
So what does McDonald's 0?

238
00:10:59,750 --> 00:11:01,630
This is for mobile.

239
00:11:01,625 --> 00:11:03,005
Alright, so from here,

240
00:11:03,005 --> 00:11:05,095
let's reduce the heights.

241
00:11:05,090 --> 00:11:08,540
We're going to reduce the
height off the page now of

242
00:11:08,540 --> 00:11:12,160
the banner rather
something reasonable.

243
00:11:12,155 --> 00:11:17,975
Let's see. I think
535. What about 530?

244
00:11:17,975 --> 00:11:19,715
I think this is fine.

245
00:11:19,715 --> 00:11:23,675
Five-thirds hill looks
fine. Scroll down.

246
00:11:23,675 --> 00:11:24,485
Okay. Yeah.

247
00:11:24,485 --> 00:11:27,415
I think you'd be fine. That's
making are very small.

248
00:11:27,410 --> 00:11:29,830
And see.

249
00:11:29,825 --> 00:11:34,855
Okay, So the texts can become,

250
00:11:34,850 --> 00:11:36,830
is a bit too large actually.

251
00:11:36,830 --> 00:11:38,540
So let's do this. I'm gonna go

252
00:11:38,540 --> 00:11:41,020
back to edit the
heading epigraphy.

253
00:11:41,015 --> 00:11:44,135
We're gonna do is we're going to

254
00:11:44,135 --> 00:11:47,585
try to make this as
small as we can.

255
00:11:47,585 --> 00:11:54,155
And now if we expand the
largest for the mobile view,

256
00:11:54,155 --> 00:11:56,125
what you have here is, okay,

257
00:11:56,120 --> 00:11:59,150
so this brings us to
a new discussion.

258
00:11:59,149 --> 00:12:03,189
Silicon is right here at the
largest size for mobile,

259
00:12:03,185 --> 00:12:05,255
the Texas, it'd be too small.

260
00:12:05,255 --> 00:12:07,885
If we try to increase
the size here,

261
00:12:07,880 --> 00:12:09,260
it looks good on the highest

262
00:12:09,260 --> 00:12:12,310
possible screen size
for the mobile.

263
00:12:12,305 --> 00:12:15,475
The issue I know is that if
we reduce the screen size so

264
00:12:15,470 --> 00:12:18,380
the smallest possible
size for mobile,

265
00:12:18,380 --> 00:12:20,740
now that text is
a bit too large,

266
00:12:20,735 --> 00:12:26,045
what you can do in this kind
of scenario is to switch

267
00:12:26,045 --> 00:12:30,895
the style size unit from pixels

268
00:12:30,890 --> 00:12:36,170
to the view port rated review
the VW or option in here,

269
00:12:36,170 --> 00:12:38,810
the VW is the viewport width.

270
00:12:38,810 --> 00:12:42,650
What we will try to do is to
try to adjust the size of

271
00:12:42,650 --> 00:12:46,990
the text based on the
width of the screen size.

272
00:12:46,985 --> 00:12:47,845
So check this out.

273
00:12:47,840 --> 00:12:50,930
I'm gonna go switch
over now to VW.

274
00:12:50,930 --> 00:12:54,310
And let's try to go
with a size of ten.

275
00:12:54,305 --> 00:12:56,755
For the highest.

276
00:12:57,130 --> 00:13:00,370
This is the highest size,

277
00:13:00,365 --> 00:13:01,705
screen size for mobile.

278
00:13:01,700 --> 00:13:05,870
And then if we reduce the
size up onto the smallest,

279
00:13:05,870 --> 00:13:10,250
you can see that the text
is actually also reducing.

280
00:13:10,250 --> 00:13:14,090
As we reduce the
size of the screen.

281
00:13:14,090 --> 00:13:16,190
That's one tip I can
give you right now,

282
00:13:16,190 --> 00:13:18,860
just simply switch
to VW as opposed

283
00:13:18,860 --> 00:13:21,650
to pixels or K. So perhaps,

284
00:13:21,650 --> 00:13:23,870
maybe one little
thing we could do.

285
00:13:23,870 --> 00:13:26,360
One final thing we
could do again will be

286
00:13:26,360 --> 00:13:29,290
to reduce the height
a little bit further.

287
00:13:29,285 --> 00:13:32,995
Let's say 450 pixels.

288
00:13:32,990 --> 00:13:34,640
That should be the last change.

289
00:13:34,640 --> 00:13:37,110
Let's try to make
this one smaller.

290
00:13:37,110 --> 00:13:38,910
And there you go.

291
00:13:38,905 --> 00:13:40,995
Okay, I think this
is, this is fine.

292
00:13:40,990 --> 00:13:42,640
This is fine at this point.

293
00:13:42,640 --> 00:13:43,500
All right.

294
00:13:43,495 --> 00:13:45,165
There you go.

295
00:13:45,160 --> 00:13:46,360
Let's just scroll down,

296
00:13:46,360 --> 00:13:48,770
see what else we can do.

297
00:13:48,930 --> 00:13:50,590
That's pretty much it.

298
00:13:50,590 --> 00:13:51,820
I think we're fine.

299
00:13:51,820 --> 00:13:54,880
Let me just make this
one really small.

300
00:13:54,880 --> 00:13:57,880
Evidence, one column.

301
00:13:57,880 --> 00:14:01,050
And there it is,

302
00:14:01,045 --> 00:14:03,315
okay, One last thing,

303
00:14:03,310 --> 00:14:05,260
last thing we could do is

304
00:14:05,260 --> 00:14:06,670
maybe reduce the size

305
00:14:06,670 --> 00:14:08,200
of the button here
just a little bit.

306
00:14:08,200 --> 00:14:10,300
So let's go ahead
and edit the bottom

307
00:14:10,300 --> 00:14:13,630
right here we're
gonna go to style.

308
00:14:13,630 --> 00:14:17,010
Actually, gonna go to style.

309
00:14:17,005 --> 00:14:19,815
Then for the
typography right here,

310
00:14:19,815 --> 00:14:22,195
Let's quick in
their size mixture.

311
00:14:22,190 --> 00:14:24,280
Of course, this
is set to mobile,

312
00:14:24,275 --> 00:14:27,665
and then we'll just go ahead
and maybe make this one.

313
00:14:27,665 --> 00:14:29,365
Let's see.

314
00:14:29,360 --> 00:14:33,800
Faults and pixels,
maybe 14 pixels,

315
00:14:33,800 --> 00:14:35,410
or what else can we change?

316
00:14:35,405 --> 00:14:40,765
We can of course change
the border radius as well.

317
00:14:41,830 --> 00:14:44,210
Let's bring this one down to,

318
00:14:44,210 --> 00:14:47,440
let's say five pixels.

319
00:14:47,435 --> 00:14:49,585
And there it is.

320
00:14:49,580 --> 00:14:56,200
Okay, now here we could try
to make the size too small.

321
00:14:56,195 --> 00:14:58,105
Actually haven't tested this.

322
00:14:58,100 --> 00:15:02,140
I'm not sure if this would
affect the tablet view.

323
00:15:02,135 --> 00:15:04,675
Is is going to affect
the tablet view and

324
00:15:04,670 --> 00:15:07,580
even the desktop view is
will always be small.

325
00:15:07,580 --> 00:15:09,940
This is up to you could
decide to just make,

326
00:15:09,935 --> 00:15:11,195
make the button small.

327
00:15:11,195 --> 00:15:14,315
All across all three
are screen sizes.

328
00:15:14,315 --> 00:15:16,345
Or you could just
go with a medium.

329
00:15:16,340 --> 00:15:18,770
I think medium will
be fine for mobile.

330
00:15:18,770 --> 00:15:19,450
All right.

331
00:15:19,445 --> 00:15:20,095
That's it.

332
00:15:20,090 --> 00:15:22,570
I'm going to go
ahead now updates.

333
00:15:22,565 --> 00:15:25,165
And there it is.

334
00:15:25,160 --> 00:15:27,260
We have successfully
built out in

335
00:15:27,260 --> 00:15:29,540
a responsive our homepage.

336
00:15:29,540 --> 00:15:30,710
Thank you for watching
and of course I will

337
00:15:30,710 --> 00:15:33,030
see you in the next class.