Original subtitles

1 1

Hi there. Over the last lectures, 2

2

together we build a beautiful website 3

3

that you can be really proud of. 4

4

It looks really great on a computer so far, 5

5

but we also want it to look great 6

6

on other devices with smaller screens, right? 7

7

And as you know, this is where 8

8

responsive web design comes in. 9

9

So far, we built our entire layout with a fluid grid. 10

10

And now it's time to take care of media queries 11

11

to make our website truly responsive, 12

12

to make it shine across all devices. 13

13

So this is how our website will look 14

14

on four different screen sizes. 15

15

Basically, as the screen gets smaller, 16

16

our content also gets smaller, and we have less white space, 17

17

so that the website can be seen on a mobile phone or tablet. 18

18

So, media queries are what will enable our website 19

19

to call different CSS style declarations 20

20

based on the current browser width 21

21

or the width of a mobile device that displays our site. 22

22

These media queries will trigger at different breakpoints. 23

23

And breakpoints are screen width 24

24

at which we want our website to change the way it looks 25

25

in order to look good on all devices. 26

26

The standard breakpoints are for tablet and for mobile. 27

27

On this diagram here, you can see some possible breakpoints. 28

28

And we will define our media queries 29

29

for exactly those breakpoints. 30

30

When you're just starting out, the easiest way 31

31

to define breakpoints is to use device widths 32

32

from popular devices, like the iPhone or the iPad. 33

33

That is what we're going to do. 34

34

However, once you got more experience, 35

35

you should set your breakpoints simply at points 36

36

where your design starts to look kind of terrible. 37

37

So, now let's see how we can define those breakpoints 38

38

with media queries in CSS. 39

39

So the first thing I'm going to do is to create a new file 40

40

where I will put the media queries. 41

41

So hit new file and save it 42

42

to our CSS folder. 43

43

And I'm going to name it queries.css. 44

44

Alright, so this is our CSS file. 45

45

And now, let's start to put our media queries here. 46

46

So, I will start with the smallest one 47

47

and this is how we do it. 48

48

So, media and then we say only 49

49

screen 50

50

and now we define our max-width. 51

51

And we say this should be 480 pixels. 52

52

And then all our styles go inside of this declaration block. 53

53

So what this means is that these rules, 54

54

which will come in here, will apply 55

55

when the width of the device or the browser 56

56

is less or equal than 480 pixels. 57

57

And this is the width of the old iPhones, 58

58

like the iPhone 5, iPhone 4, and so on. 59

59

So I am actually going to put a comment in here 60

60

to say that so that we can come here later 61

61

and don't get lost in our code. 62

62

So this is for small phones 63

63

from zero to 480 pixels. 64

64

Okay, next. 65

65

We will make a media query 66

66

for larger small phones. 67

67

And let me just copy this, because kind of lazy here. 68

68

Don't wanna write it all again. 69

69

Okay and this will be 767 pixels 70

70

and this, again, means that rules that will be 71

71

in this block here will apply for all the browser widths 72

72

which are less or equal to 767. 73

73

And this value is because of the width of the iPad is 768. 74

74

So we want this media query to target all the phones 75

75

which are smaller than the iPad, 76

76

and then the next media query will target the iPad 77

77

and of course other tablets as well. 78

78

I am just going with the iPad and iPhone, 79

79

because, you know, those are the most popular devices. 80

80

So I will say small 81

81

phones to 82

82

small tablets, 83

83

cause you know there are maybe some tablets 84

84

with 700 pixels width or something like that. 85

85

So we target them as well here. 86

86

So this means from 481 87

87

to 767 pixels, right? 88

88

So and now I will 89

89

put another query here. 90

90

And this one is 91

91

1023. 92

92

And so this will target the iPad in the portrait mode, 93

93

which has 768 pixels. 94

94

And again, the reason for this value here 95

95

is that the iPad in the landscape view 96

96

has 1024 pixels. 97

97

So that will be in the next media query. 98

98

So let me write it right here. 99

99

So this goes from small tablet to big tablet. 100

100

So, from 768 pixels, which is the iPad, 101

101

to 1023 pixels. 102

102

And now the last one, which will then target 103

103

like, the iPad and all smaller computers. 104

104

And I will define this as 1200, 105

105

and the reason for this is that our row, 106

106

that you surely remember, was defined as 1140 pixels. 107

107

And so, I want the website to change its look 108

108

when it gets close to that value, 109

109

so that we always have some margins 110

110

at the right and left side. 111

111

But I will show you that in a moment, 112

112

so don't worry about that right now. 113

113

I will just say here that this is from big tablet 114

114

to 1300 pixels, 115

115

which is for width 116

116

smaller than pixel row. 117

117

Alright. So these are our media queries right here. 118

118

In these media queries, we can then define all our styles. 119

119

Let me just close this one here as well. 120

120

This block. 121

121

Alright, so in case that you're a little confused right now, 122

122

just go back to the initial part of the video 123

123

where I had that diagram. 124

124

And there you can exactly see how these media queries work. 125

125

That diagram does a really great job in explaining this. 126

126

So one thing that I need to do right now 127

127

as you can imagine, is to actually include 128

128

this file here in our head. 129

129

So I'll duplicate this line 130

130

and then include the queries file, 131

131

because if I wouldn't do this of course 132

132

all of this wouldn't work. 133

133

Also here in the head, I need to include another thing 134

134

that is essential when you make responsive web design 135

135

and it's this meta tag. 136

136

We will talk about meta tags later in the course, 137

137

but for now let's just put it right here. 138

138

And we need a viewport one, 139

139

and what we want to say here is that 140

140

width equals device-width 141

141

at initial-scale 142

142

equals 1.0. 143

143

So all that this will do is to tell mobile phones, 144

144

for instance, that they should not zoom out the page. 145

145

So that they should always start with the scale of one, 146

146

which is exactly this here. 147

147

And alright, now I think we're ready 148

148

to start writing some CSS inside of those media queries. 149

149

So how are we going to proceed now? 150

150

We will basically for each breakpoint view the page 151

151

and then fix everything that looks broken. 152

152

So let's start to reduce the browser's width. 153

153

So again, this is what it looks like in the normal way. 154

154

And actually, the best thing to do now is 155

155

to not use this live connection, 156

156

but open the HTML file directly, 157

157

because we will need the Google Chrome Developer Tools. 158

158

So let me do that. 159

159

And here we are. 160

160

And the reason why we need the Developer Tools 161

161

is actually because of this here. 162

162

When we re-size the window, this shows us how 163

163

the size of the window. 164

164

So you remember our first breakpoint was 1200, 165

165

which is here. 166

166

And I will now show you why, 'cause imagine it wouldn't be 167

167

then you see what happened 168

168

to the text there on the left side? 169

169

It just disappears, right? 170

170

So 171

171

1140 is the width of the row and of the text box, 172

172

but then the text would be completely glued 173

173

to the border of the browser 174

174

and we don't want that, and also here. 175

175

So that's why I chose the 1200 value here. 176

176

So let's see what we can change here. 177

177

So this box here is the hero text box. 178

178

So let's go to the original definition 179

179

of this in the header part. 180

180

And let's see what we can do with this. 181

181

So I will now go ahead and copy all of this into here. 182

182

And then I will change the things 183

183

that I want to change here. 184

184

Now I don't want the width to be fixed anymore. 185

185

I just want it to be 100%. 186

186

So I don't want to change nothing of this 187

187

and nothing of this. 188

188

And in order to create some space then, 189

189

between the text and the border of the browser, 190

190

I will say that I want the padding 191

191

to be zero on the top and the bottom 192

192

and two percent on left and the right side. 193

193

So now let's see what this looks like. 194

194

We don't need to save it, 195

195

because we have that auto save extension, 196

196

but we will now have to reload this 197

197

because we're no longer working with the live connection. 198

198

So this is the 1200 limit. 199

199

And let's see what happens. 200

200

Okay. And this is kind of cool, right? 201

201

Look at the text just. 202

202

So now that effect that we had before no longer happens. 203

203

So our width is 100%, 204

204

and we can see that here in the Developer Tools. 205

205

So we actually have that rule here 206

206

and we see the width with 100%. 207

207

Now if we make that bigger, then that rule goes away, 208

208

because the media query does no longer apply. 209

209

So very well. 210

210

But what we see now here is that this text is still 211

211

completely glued here to the browser border. 212

212

And let me check that html. 213

213

But I think it's inside of the row. 214

214

Yeah, it actually is. 215

215

So now I will define something 216

216

for the row class and for all rows. 217

217

And I'm going to say the same thing as I said up there. 218

218

So I want the padding, 219

219

and in order to make this look consistent 220

220

I will use the same padding value. 221

221

And I'm now going to format this a little bit different 222

222

than from what I've done before, 223

223

because every time we only have one declaration in a block 224

224

we don't need to create all of those lines. 225

225

And we should actually do the same here. 226

226

Like here, for instance, but I'm not going to do that. 227

227

But if you want to have a 228

228

But if you want your code to look cleaner, 229

229

then you should go ahead and do that. 230

230

So again let's check that out. 231

231

I'll refresh it, and now you saw that instantly 232

232

that we now have this margin here, or this padding. 233

233

And the same thing happens down here, actually, 234

234

because all of these are rows. 235

235

That's how we always have that distance here. 236

236

Okay great. 237

237

We actually see something really strange here happening. 238

238

This because we opened the file now 239

239

and not the browser connection so something changed. 240

240

So let me change hello we're Omnifood. 241

241

We see what's going wrong here. 242

242

So it's this. We need to replace this. 243

243

Alright. I think that's it for now. 244

244

Here's also I'm hungry. 245

245

Okay. 246

246

So let's see what we have next. 247

247

So this is our next media query, 248

248

which goes from 768 to 1023. 249

249

Let's check this out in the browser. 250

250

Okay again, we need the Developer Tools to see the width. 251

251

So let's go to 768. 252

252

Okay, this will be our tablet. 253

253

So let's see what we should change here. 254

254

Actually, the first thing I'm going to do 255

255

is to change the font-size. 256

256

The overall font-size. 257

257

So body 258

258

font-size. 259

259

And now it comes in very very handy 260

260

that we defined all the font sizes 261

261

across the entire web page in percentages, 262

262

which means that all the font sizes 263

263

are based on the base font size. 264

264

So this was 20, and now I will make it down to 18 pixels. 265

265

And now all the font sizes will automatically decrease 266

266

and this is incredibly useful. 267

267

And another thing that we should surely do, 268

268

since we're now on smaller devices 269

269

is to change the padding of the sections. 270

270

And this was 80 pixels top and bottom 271

271

and I will take it down to 60 pixels. 272

272

Of course, I have to write the padding here, alright. 273

273

So let me check this out. 274

274

Re-size this. 275

275

Okay, you see the text is smaller 276

276

and I think it definitely looks more adequate to this device 277

277

or to this browser width. 278

278

And, yeah, we have less space between the sections, 279

279

which also makes lot of sense. 280

280

When you're on iPad, you don't wanna scroll 281

281

through a website and see nothing but white space, right? 282

282

So what else can we do now? 283

283

For instance, this text here can be wider now. 284

284

It looks kind of weird now. 285

285

So you remember, let me check, it was the long copy class. 286

286

Which is actually an overall class. 287

287

Here it is. 288

288

So let's change this. 289

289

And again, I will copy of this 290

290

and then change the things that I want to change. 291

291

So line-height can stay the same, 292

292

but width can now be 80%, 293

293

and therefore the left margin needs to be 10, 294

294

because 10 plus 10 makes 20, and 20 plus 80 makes the 100%. 295

295

Alright. 296

296

Save this, and great. 297

297

So again, this is now really designing in the browser. 298

298

We're gonna check everything 299

299

and see which doesn't look right, and then fix it. 300

300

So now that you know how to work with media queries, 301

301

and build truly responsive websites 302

302

let's take a small break and continue with what we're doing 303

303

in the next lecture.