Original subtitles

1 1

In this lecture, we'll continue 2

2

to make our website responsive. 3

3

So the next thing we can do here, 4

4

is to remove some white space, for instance, 5

5

here... 6

6

And here between those steps, 7

7

and here between the steps, 8

8

and the button, 9

9

and we will also increase this image a little bit 10

10

and so let's go do that. 11

11

We're still here at this media screen 12

12

which will target from small tablets to big tablets. 13

13

Alright, so we can start with the steps box, 14

14

and let's say that it should have a margin top 15

15

to only 10 pixels now. 16

16

So I'm, as I said, 17

17

starting to remove some of the white space here. 18

18

So it also have the works... 19

19

steps, right, 20

20

and I will say that I want the margin bottom to be 40 pixels 21

21

I think it was 50, if I remember it correctly, 22

22

but, let's check it. 23

23

It's old form... 24

24

How it works section, okay, 25

25

so the steps box had 30 and 70 26

26

and now I'm going to set them to 10, 27

27

and I'll actually have to do this 28

28

for the steps box last child as well. 29

29

Okay so the work steps, had a margin bottom here of 50, 30

30

and I will have to set this one here as well. 31

31

So let me copy this, 32

32

and I'll also need the steps box last child, right? 33

33

So this may be a little confusing, 34

34

cause, y'know it's a lot of code we have to change here, 35

35

so if you want you can then later review the code 36

36

a little more slowly. 37

37

So I want this to be 10 pixels as well, 38

38

and now between the last steps and those buttons, 39

39

I will say 60 pixels should be enough, 40

40

and I will also now decrease the app screen, 41

41

which is the image, 42

42

and I want a width 43

43

of 50 percent, 44

44

so increase it from 40 percent to 50 percent. 45

45

See it was 40 now it will be 50. 46

46

Okay I'm going to reload this thing now. 47

47

Well this looks much better, right? 48

48

Let's re size it. 49

49

Okay, so, here we have our break point, 50

50

at 1023 51

51

What does this... how it looks like? 52

52

And as we get it smaller, 53

53

so this is the other break point, 54

54

okay, 55

55

so this section looks good now, 56

56

and now we have a little problem in here, 57

57

because those icons are way too wide, 58

58

so let's go back and reduce their width, 59

59

and also I should actually decrease the font size in here. 60

60

So, those icons are icons small class, 61

61

so let me check them. 62

62

So they had a width of 30 pixels, 63

63

now we'll decrease that, 64

64

to, let's say, 20 pixels, 65

65

and then... 66

66

the city future class, 67

67

I will decrease it's font size to 90 percent. 68

68

And let's reload this, and it looks much better. 69

69

So there is still, like a line break here 70

70

on some smaller width like this one here, 71

71

So... 72

72

We will decrease it even more 73

73

to 17 for instance, 74

74

and let me check it again, 75

75

this margin right can be set to five pixels. 76

76

So you see I'm changing a lot of stuff here 77

77

and ya, I'm doing that because it really is important 78

78

to make our websites look good 79

79

on any device and on any width. 80

80

So this doesn't change so much actually 81

81

but, well, it's the best we can get right? 82

82

So in here, everything looks okay, 83

83

and now, so these boxes have a width of 90 percent, 84

84

and a margin left of 5 percent to center them, 85

85

so I'm going to change that 86

86

down here and these are called plan box 87

87

and so let's change now the width and say 100 percent 88

88

and the margin left to zero percent. 89

89

Let's check it, 90

90

it's better and now let's decrease these font sizes here, 91

91

and there's also some weird thing going on again 92

92

with the HTML so I'm also going to fix that, 93

93

but let's start by reducing the font size here of this. 94

94

And that is the plan price, right? 95

95

Actually going to copy this one, 96

96

and put it here. 97

97

And let's say you want it in 50 percent, 98

98

so the code is getting much bigger 99

99

and it's not always easy to find 100

100

the stuff that we want to edit, right? 101

101

Pdat is the problem, let's adjust that, 102

102

Alright, so, 103

103

alright and now, 104

104

just let's 105

105

increase the width of this contact form class as well. 106

106

Contact form... 107

107

And 80 percent. 108

108

So we still don't want this to be full width, 109

109

but a little wider is better. 110

110

Alright, 111

111

so this looks good now. 112

112

So we fixed everything in this media query here, 113

113

so now let's get to the next one, 114

114

and this one is for small phones to small tablets, 115

115

for instance, the iPhone six, 116

116

so I will put this browser to this lowest width 117

117

of 481 or 480. 118

118

So... 119

119

You see the width up there, 120

120

and 480 is absolutely very small, 121

121

let's say like 500, close to 500. 122

122

So, a lot of things going on here, 123

123

all of this looks quite bad right now, right? 124

124

So that's what I mean we really need to adapt this, 125

125

look at this button. 126

126

And you also notice a strange thing here, 127

127

which is this here, 128

128

so now we have this problem 129

129

because some of the text goes out of the actual width. 130

130

So, let us fix that and it's easy to do. 131

131

We just need to 132

132

add a new style here, 133

133

which is overflow x, and then hidden, 134

134

so now that will get hidden, 135

135

and we actually should do the same for the buddy, 136

136

and we can actually add buddy here, 137

137

it's not such a big difference. 138

138

So now that will be fixed and problem as well, 139

139

so let's go back to our queries and start adding some code 140

140

to this media query here. 141

141

So I'll start by reducing the body font size even more, 142

142

to now 60 pixels, 143

143

and the section 144

144

I will reduce the padding between those 145

145

so the white space between those 146

146

which we set to 60 before 147

147

but now we have really small devices 148

148

so let's say 30 pixels and zero. 149

149

And now the padding at rows, 150

150

we set it before at, yep, two percent, 151

151

but let's set it to four percent now, 152

152

so row 153

153

and also this box this hero text box, 154

154

this is equally important 155

155

in the header. 156

156

So let's set their padding on the left and the right side. 157

157

So zero in top and bottom 158

158

and four percent at left and right. 159

159

And before we go check how this looks, 160

160

we can do one last thing, 161

161

and this is, 162

162

that we now want to 163

163

define the width of all the columns as 100 percent 164

164

which means that the columns will no longer be 165

165

side by side but will be stacked on top of each other. 166

166

So let's see what that looks like. 167

167

Alright here we go, 168

168

still have this problem here 169

169

I'm going to talk about it in a second. 170

170

So, this is what I was talking about, 171

171

those are now on top of each other. 172

172

Right here we have some weird stuff going on, 173

173

I'm going to fix that in a second, 174

174

those images are way too large, 175

175

and down here everything looks quite good. 176

176

But, yep, one thing after the other. 177

177

I'm first going to fix this navigation, 178

178

and in fact, we're going to build a mobile notification 179

179

in the next section 180

180

where we will start learning some jQuery 181

181

and so for now, I'm just going to hide all of the navigation 182

182

and that's pretty easy to do actually, 183

183

I will just say 184

184

main nav... 185

185

display none 186

186

and this will hide the entire navigation. 187

187

Alright... 188

188

The class name... 189

189

Okay and that looks better for now 190

190

So, I'm not going to change every little detail here now 191

191

because, y'know, you can change that later on yourself, 192

192

I'm just going to fix the most important thing now, 193

193

which is for instance, this margin here, 194

194

so I now want this paragraph to be 100 percent wide as well 195

195

so that's one of the things that I'm going to change 196

196

then we can probably make these 197

197

H2 elements a little bit smaller 198

198

and the H1 element as well, 199

199

and then take away some more white space here 200

200

from this section will also be important, 201

201

and I think down here most of the thing look pretty good. 202

202

So, no need all this space here, 203

203

you already had changed the long copy here 204

204

but now I'm gonna go even further 205

205

and say 100 percent in margin 206

206

zero percent 207

207

but then as I said I will also 208

208

reduce the font size of the H1 element. 209

209

So font size 210

210

let me say 211

211

180 percent 212

212

and I will duplicate this for the H2 element 213

213

and reduce the size to 150 percent. 214

214

Okay, and now, 215

215

going back to 216

216

this code here which is for the how it works section, 217

217

let's make this white space even smaller here, 218

218

let me check how it looks 219

219

so that I know what to change here, 220

220

so the most important thing is to reduce this here, right? 221

221

So let's do that, so we don't need this, 222

222

probably 20 pixels is great 223

223

and here also 20 we don't need so much white space. 224

224

And one other thing I should do there 225

225

is to reduce the circle in the work section, 226

226

so let's change this here maybe to 227

227

40 pixels 228

228

and 40 pixels here as well 229

229

we'll of course not change any of those. 230

230

Change this to 15 pixels, 231

231

and also decrease the padding a little bit, 232

232

so make all of the things a little bit smaller. 233

233

Okay, something is not working here right now, 234

234

this space is still way too big. 235

235

I guess because I misspelled this right here. 236

236

Okay, now it looks better, 237

237

and I just need to change the font size in here, 238

238

and to, of course, put this image here in the center. 239

239

So font size, 240

240

100 percent let's say... 241

241

120 in fact 242

242

and... 243

243

So where is that... 244

244

So this is for the image, 245

245

so the steps box first child, 246

246

I now want it to be centered. 247

247

Alright, let's just re size this a little bit. 248

248

Woah the image is so incredibly big now 249

249

so we better make that a little bit smaller again 250

250

so where is that... 251

251

Here it's app screen, 252

252

app screen and I'm going to change that to 40 pixels, 253

253

okay looks like the correct size now, 254

254

alright, 255

255

so as I said I will let you tweak other minor things 256

256

here on the website on your own with your own CSS 257

257

but there's still one thing that I need to fix 258

258

and it's this here. 259

259

You see, these columns doesn't start 260

260

at the same point, right? 261

261

So the first column is different that this one here, 262

262

and that is actually because I forgot to change one thing 263

263

and it has to do here with the column 264

264

and this comes actually from this grid file, 265

265

so all columns have a margin 266

266

which is this one, let me copy it, to our query CSS 267

267

so that we can change it to what we want. 268

268

So currently we have a left margin of one percent 269

269

zero percent 270

270

at right side, 271

271

one percent bottom, and one point six on the left. 272

272

So now we don't want anything of that, 273

273

we want the margin to be zero here, 274

274

zero on the right, 275

275

and on the bottom is the only place we want some margin, 276

276

because we want, y'know, 277

277

we want some distance here between those boxes, 278

278

so let me put this to four percent and this also to zero 279

279

and that will now fix this weird thing, ya, 280

280

and this looks much better 281

281

now we have some space here between the boxes, 282

282

and they all start at the same place, right. 283

283

So I think this looks cool now and... 284

284

That's now... 285

285

Look here at our last media query 286

286

which is for really small screen sizes. 287

287

Let me just put this here 288

288

like actually can put it smaller than this 289

289

and it still looks good in here 290

290

so I guess maybe not so much to change. 291

291

So all I'm going to do is make this form 100 percent wide 292

292

and to remove even more padding between those sections 293

293

because we have to imagine that it's a really small phone. 294

294

So let me just make some minor changes here in fact. 295

295

So I will say section 296

296

padding we had 30 pixels let's say 25 now 297

297

and zero left and right 298

298

and the contact form 299

299

can have a width 300

300

of 100 percent 301

301

so I just didn't want to leave this empty 302

302

but in fact it maybe was not so necessary 303

303

but who knows maybe in your future websites 304

304

you will actually need this media query. 305

305

So I'm going to reload this for the last time... 306

306

And so this is our website on a mobile phone, 307

307

so feel free to change some more stuff here on your own 308

308

because now you know how all of this works, 309

309

but I'm going to leave it as this. 310

310

So, we are now done 311

311

with the HTML and CSS part of our website actually 312

312

so congratulations, in the next lecture, 313

313

we will just test this website on different browsers, 314

314

which is a very important aspects of web design 315

315

and web development. 316

316

So see you there.