0
1
00:00:00,770 --> 00:00:07,260
All right. So, in the last lesson, we managed to change the z-index, or rather the stacking order, of our
1

2
00:00:07,290 --> 00:00:12,060
title image over here to make it display behind the feature section.
2

3
00:00:12,060 --> 00:00:17,990
Now if we look closely, though, at this title section, there’s still a few teething problems.
3

4
00:00:18,000 --> 00:00:25,050
Firstly, if I move this into mobile size, you can see that my image actually disappears, and it's also
4

5
00:00:25,050 --> 00:00:27,790
still rotated, which is really odd.
5

6
00:00:27,810 --> 00:00:33,930
The second thing is that, even when I'm in the mobile size when it's really small, my title is still left
6

7
00:00:34,020 --> 00:00:37,080
aligned, which also looks very strange.
7

8
00:00:37,080 --> 00:00:42,380
So how can we modify our web site’s looks on mobile?
8

9
00:00:42,820 --> 00:00:48,480
Well so far the responsiveness that we're getting whereby, you know, that the left and the right parts
9

10
00:00:48,480 --> 00:00:50,120
here are taking up 50 percent,
10

11
00:00:50,130 --> 00:00:52,580
but then on mobile they go into 100 percent,
11

12
00:00:52,620 --> 00:00:57,730
this is coming from Bootstrap grids, remember, and it works well enough.
12

13
00:00:57,810 --> 00:01:06,060
But if we wanted to fine tune this, we’ll need to use another advanced feature of CSS, which are CSS media
13

14
00:01:06,060 --> 00:01:11,330
queries. And I want to show you how you can actually use just plain old CSS
14

15
00:01:11,490 --> 00:01:18,550
in order to produce responsive designs by learning about these media queries. So you might ask, you know,
15

16
00:01:18,570 --> 00:01:19,890
why do I care, right?
16

17
00:01:19,890 --> 00:01:22,650
Why do I care how good it looks?
17

18
00:01:22,650 --> 00:01:28,220
Why do I have to make so many designs for how it looks on mobile as well as on web?
18

19
00:01:28,230 --> 00:01:33,300
You know, why can't I just have one design and just be okay with it
19

20
00:01:33,300 --> 00:01:35,280
looking good on the web, right?
20

21
00:01:35,550 --> 00:01:44,670
Well the problem is that since about October ish 2016 the number of people who browsed the web on mobile
21

22
00:01:44,760 --> 00:01:48,220
overtook those who browsed on desktop.
22

23
00:01:48,240 --> 00:01:54,510
So there's actually more people right now who go on web sites from their phone than from a desktop computer
23

24
00:01:54,540 --> 00:01:55,730
or a laptop.
24

25
00:01:55,740 --> 00:02:03,540
So it really is the generation of mobile first and this is why we always have to think about responsiveness
25

26
00:02:03,690 --> 00:02:05,740
whenever we design web sites.
26

27
00:02:05,760 --> 00:02:08,100
Now what are some of the ways that we can deal with this?
27

28
00:02:08,220 --> 00:02:14,940
Well, number one is do nothing, basically bury your head in the sand and pretend that nothing happened
28

29
00:02:15,250 --> 00:02:19,360
and just you know make your normal desktop web sites and be done with it.
29

30
00:02:19,410 --> 00:02:22,940
Well the problem is that you actually get punished for this kind of behavior.
30

31
00:02:23,010 --> 00:02:30,210
So you may or may not know, but Google rankings are affected by whether if your web site is mobile friendly
31

32
00:02:30,300 --> 00:02:36,510
or not, and there's in fact a really helpful web page where they allow you to put in the URL of your
32

33
00:02:36,510 --> 00:02:40,230
web site and they will test to see how mobile friendly it is.
33

34
00:02:40,410 --> 00:02:42,090
If it's not mobile friendly at all,
34

35
00:02:42,120 --> 00:02:49,030
as in, it looks really awful and difficult to read on mobile, you get penalized in the Google search rankings,
35

36
00:02:49,160 --> 00:02:53,260
and we all know nobody checks anything on google page two or page three.
36

37
00:02:53,310 --> 00:02:59,340
So this really really does matter, especially if you're running a business, right? Now, how can we use a
37

38
00:02:59,340 --> 00:03:00,570
web site to test this?
38

39
00:03:00,630 --> 00:03:04,660
Well we can go to our trusty 90s web sites.
39

40
00:03:04,920 --> 00:03:08,600
This one is a development design studio
40

41
00:03:08,610 --> 00:03:14,630
called Lambsoft, and it's pretty interesting if you just take a look at it actually.
41

42
00:03:14,850 --> 00:03:20,270
Firstly you get a whole 20 seconds of looking at their logo.
42

43
00:03:20,700 --> 00:03:26,690
Then you get another 20 seconds of looking at this flash animation.
43

44
00:03:26,700 --> 00:03:34,080
So it just repeats itself forever until either we die of boredom or 20 seconds is up.
44

45
00:03:34,500 --> 00:03:41,690
And then, as if all of that wasn't enough, you get another flash animation for 15 seconds.
45

46
00:03:43,190 --> 00:03:51,320
But, finally, we get on to the home page and it is Killer Web Site Development Lambsoft Productions.
46

47
00:03:51,320 --> 00:03:55,390
Let me make your web site a place to be proud of.
47

48
00:03:55,430 --> 00:03:59,940
I'm really not sure if we should be proud of this web site but it seemed like a relic from the 90s.
48

49
00:03:59,990 --> 00:04:05,510
So maybe if we you know time travel then this is what was actually cool back then.
49

50
00:04:05,510 --> 00:04:13,980
Anyways, this is clearly not a mobile optimized web site. I mean, just what happens, nothing happens, right?
50

51
00:04:14,180 --> 00:04:22,530
So if we plug this into our Mobile-Friendly Test, let's paste that URL in here and let's hit Run Test.
51

52
00:04:22,550 --> 00:04:27,830
Let's see what the verdict is from Google.
52

53
00:04:27,960 --> 00:04:28,230
All right.
53

54
00:04:28,230 --> 00:04:29,970
So definitely no.
54

55
00:04:29,970 --> 00:04:33,030
Page is not mobile friendly.
55

56
00:04:33,030 --> 00:04:40,660
The text is too small, the viewports are not set, and you will be punished on the Google search rankings.
56

57
00:04:40,680 --> 00:04:46,770
So let's not do that. Let's not ignore mobile friendliness, and we have to do something.
57

58
00:04:46,770 --> 00:04:47,780
So what can we do?
58

59
00:04:48,000 --> 00:04:55,140
Well, we can either make a separate mobile site which redirects users if they're trying to browse from
59

60
00:04:55,140 --> 00:04:58,080
mobile. And many large web sites actually do this.
60

61
00:04:58,080 --> 00:05:04,110
For example, if you try to go onto Facebook on your mobile device, not through the app, but through your
61

62
00:05:04,110 --> 00:05:10,560
browser, then you actually get redirected not to facebook.com but m.facebook.com. And that
62

63
00:05:10,610 --> 00:05:18,120
m stands for mobile, because they've actually created a separate site that's laid out perfect for mobile
63

64
00:05:18,120 --> 00:05:21,610
viewing, and you can go there on your normal laptop as well,
64

65
00:05:21,630 --> 00:05:26,220
if you just head over to m.facebook.com. And you'll see how they've structured and designed the
65

66
00:05:26,220 --> 00:05:32,720
web site completely differently from their desktop version in order to be more mobile friendly.
66

67
00:05:32,720 --> 00:05:37,470
Now that's also a lot of work. You're kind of designing two separate web sites,
67

68
00:05:37,470 --> 00:05:38,180
right?
68

69
00:05:38,190 --> 00:05:44,250
So the third solution, and what I would recommend as the best solution, is to just make your web sites
69

70
00:05:44,340 --> 00:05:52,390
responsive, so that it looks nice on desktop, on laptop, on iPad, on tablet, and on your mobile.
70

71
00:05:52,590 --> 00:05:55,910
And that is what we're going to learn about today.
71

72
00:05:55,980 --> 00:06:02,430
We're going to make our web site responsive not using external tools like Bootstrap or, you know, any
72

73
00:06:02,430 --> 00:06:09,030
of the other frameworks, but we're going to use CSS native functionality, and the one that we'll be using
73

74
00:06:09,120 --> 00:06:13,860
are media query breakpoints in order to achieve this responsiveness.
74

75
00:06:13,860 --> 00:06:17,010
But firstly, what exactly are media queries?
75

76
00:06:17,070 --> 00:06:21,990
Well, let's find out by creating a new Code Ply playground.
76

77
00:06:21,990 --> 00:06:27,870
Now the first thing that I'm going to do is, I'm actually going to remove our Bootstrap framework, so
77

78
00:06:27,870 --> 00:06:33,920
I'm going to go with No Framework, because as we said before this is a pure CSS feature,
78

79
00:06:33,930 --> 00:06:38,170
it's not related to Bootstrap or even jQuery.
79

80
00:06:38,370 --> 00:06:43,260
And in fact if you leave the Bootstrap framework, then it might actually affect the media queries.
80

81
00:06:43,260 --> 00:06:48,200
So I want you to remove the framework completely and hit save.
81

82
00:06:48,210 --> 00:06:54,030
Now we're going to create a new h1, just going to say Hello World.
82

83
00:06:54,030 --> 00:06:58,800
And if I hit run you can see we've got this nice black text.
83

84
00:06:58,800 --> 00:07:05,910
And as we all know we can go into the CSS and simply say something like, let's target the h1 and change
84

85
00:07:05,910 --> 00:07:07,760
its color to red.
85

86
00:07:07,890 --> 00:07:11,980
So we know that when I hit run it's going to change the text color to red.
86

87
00:07:12,270 --> 00:07:17,680
Now what if I only want it to be red under certain conditions?
87

88
00:07:17,820 --> 00:07:26,410
So, say if I wanted to say that, only when my web site is being printed do I want the text to be red.
88

89
00:07:26,460 --> 00:07:29,780
How can I affect my website on that kind of level?
89

90
00:07:29,880 --> 00:07:35,340
Well, this is where media queries come in. So I can say @media, then I'm going to give it a statement
90

91
00:07:35,340 --> 00:07:37,660
to evaluate whether it's true or false.
91

92
00:07:37,830 --> 00:07:45,180
So I'm going to say @media print. So if our web site is under the condition of being printed, then this will
92

93
00:07:45,180 --> 00:07:46,220
equal true,
93

94
00:07:46,500 --> 00:07:50,900
and that means that all of this code inside the brackets will get carried out.
94

95
00:07:51,090 --> 00:07:57,960
So now let's hit run and you can see that under normal conditions my web site just has an 1 that's
95

96
00:07:57,960 --> 00:07:59,590
black. But
96

97
00:07:59,610 --> 00:08:08,850
if I now hit print, you can see that the text is now red, and that comes from our handy media query.
97

98
00:08:08,850 --> 00:08:11,930
Now there's other media queries apart from print.
98

99
00:08:11,940 --> 00:08:18,640
There are things such as screen which is dependent on the screen size or screen resolution.
99

100
00:08:18,840 --> 00:08:26,670
There's also another one, for example speech, which will be activated if the web site is being read to
100

101
00:08:26,730 --> 00:08:29,190
a visually impaired person for example.
101

102
00:08:29,190 --> 00:08:35,670
So we can use all of these different types for our media query, and this is kind of roughly how the media
102

103
00:08:35,670 --> 00:08:37,590
queries are structured.
103

104
00:08:37,590 --> 00:08:43,890
Firstly you have the @media keyword, which says that everything that comes afterwards is a media query.
104

105
00:08:43,890 --> 00:08:50,080
The next thing is the type of media or medium that we are selecting on.
105

106
00:08:50,100 --> 00:08:56,160
So the code should only be activated if the web site is being displayed on a screen, or if it's being
106

107
00:08:56,160 --> 00:09:00,000
printed, or if it's on a screen reader, all of those kind of things.
107

108
00:09:00,180 --> 00:09:02,420
And then the third thing is the feature.
108

109
00:09:02,460 --> 00:09:06,390
So, as we said before, the media query is a query,
109

110
00:09:06,390 --> 00:09:09,920
so we're checking to see if something is true or false.
110

111
00:09:10,050 --> 00:09:19,800
So we can check to see, for example, if the media is a screen, i.e. being displayed on a device, and the feature
111

112
00:09:19,800 --> 00:09:23,950
is that its minimum width is 900 pixels,
112

113
00:09:23,970 --> 00:09:29,540
so we're checking to see what size the web site is being rendered in.
113

114
00:09:29,620 --> 00:09:35,120
Is it being rendered in something that's really large like a desktop computer?
114

115
00:09:35,320 --> 00:09:42,220
Well, in that case we're going to change something. Now, instead of checking whether if our web site
115

116
00:09:42,250 --> 00:09:48,940
is in the printed condition, we can also check for other things like screen resolution or screen size,
116

117
00:09:49,240 --> 00:09:54,120
which is more applicable to when we want to make our web sites responsive.
117

118
00:09:54,190 --> 00:10:01,720
So let's delete the print statement and let's say instead that under the conditions where our web site
118

119
00:10:01,750 --> 00:10:13,330
has a max width of say 900 pixels. So we know from Code Ply's estimates that a laptop is roughly 1200
119

120
00:10:13,330 --> 00:10:21,310
by 264 pixels and a tablet is roughly 880 pixels by 264, and the 880 is of course
120

121
00:10:21,310 --> 00:10:22,140
the width.
121

122
00:10:22,420 --> 00:10:30,430
So that means that if we say that under the conditions where the web site is being displayed and the
122

123
00:10:30,430 --> 00:10:33,980
maximum width is 900 pixels,
123

124
00:10:34,180 --> 00:10:41,700
so if the web site is 900 pixels in width or less, then we will change the h1's color to red.
124

125
00:10:41,980 --> 00:10:47,170
So let's pop this out and we can see that on laptop size it is black,
125

126
00:10:47,170 --> 00:10:48,260
h1 is black,
126

127
00:10:48,430 --> 00:10:54,930
but as we get smaller and we go to the tablet size, you can see that our color just changed dramatically, it
127

128
00:10:54,930 --> 00:11:00,520
just turned red. And when our web site is any size that's 900 pixels or smaller,
128

129
00:11:00,520 --> 00:11:07,610
so tablet or mobile or, you know, any sort of small device, then we can change and affect our
129

130
00:11:07,690 --> 00:11:10,770
CSS. So what might you want to change in here?
130

131
00:11:10,780 --> 00:11:19,090
So, for example, what we might want is that, say, under normal conditions we want the h1 to be displayed
131

132
00:11:19,090 --> 00:11:22,600
with a font size of say 30 pixels,
132

133
00:11:22,660 --> 00:11:23,800
right?
133

134
00:11:23,950 --> 00:11:27,240
So if I hit run you can see that it's roughly the same size as before,
134

135
00:11:27,370 --> 00:11:30,670
it's long enough for somebody on a desktop size.
135

136
00:11:30,670 --> 00:11:39,190
Now what if, when our screen gets smaller, say on a tablet or mobile, I want the font size to be a little
136

137
00:11:39,190 --> 00:11:42,040
bit bigger so that it's easier to see?
137

138
00:11:42,250 --> 00:11:48,640
So let's change the font size on mobile tablet to say 60 pixels, double the size.
138

139
00:11:48,640 --> 00:11:54,730
So now if I hit run you can see that nothing really happens on the desktop laptop sizes,
139

140
00:11:54,850 --> 00:12:01,400
but once I trip that breakpoint, that 900 pixel point, you can see it's right here,
140

141
00:12:01,690 --> 00:12:08,460
then our font gets doubled in size and it's now much easier to see on a smartphone.
141

142
00:12:08,470 --> 00:12:10,070
Now you might want to go the other way too.
142

143
00:12:10,090 --> 00:12:15,730
Maybe you want the text to be smaller on the phone and larger on the desktop to take up more space that's
143

144
00:12:15,730 --> 00:12:17,320
available.
144

145
00:12:17,320 --> 00:12:26,470
But essentially we've managed to create a media query breakpoint at 900 pixels, where when
145

146
00:12:26,470 --> 00:12:34,750
this becomes true, the code that's inside these brackets gets enacted, and we override the existing font
146

147
00:12:34,750 --> 00:12:38,600
size with our font size for smaller devices.
147

148
00:12:38,640 --> 00:12:44,410
Now, the wording of these breakpoints are a little bit confusing, I must admit, because you can have 
148

149
00:12:44,410 --> 00:12:46,810
max-width and you can have min-width.
149

150
00:12:46,930 --> 00:12:54,490
So if the minimum width is 900 pixels then we're now targeting in the other direction. We're saying that
150

151
00:12:54,880 --> 00:13:02,950
when our web site is being displayed on any device that's 900 pixels wide or greater, then we want to
151

152
00:13:02,950 --> 00:13:04,190
change the font size.
152

153
00:13:04,210 --> 00:13:12,970
So if I hit run now, you can see that when this is being displayed on a laptop or desktop size, it's massive,
153

154
00:13:13,090 --> 00:13:20,060
but when I trip that 900 breakpoint and go into tablet or mobile, then it reverts to the normal styling.
154

155
00:13:20,110 --> 00:13:25,660
So this media query is only valid from 900 pixels onwards.
155

156
00:13:25,660 --> 00:13:32,320
Now, you can also use more than one parameter to really narrow down the range where you want this media
156

157
00:13:32,320 --> 00:13:33,560
query to occur.
157

158
00:13:33,760 --> 00:13:46,420
So for example you can combine a minimum width of say 900 pixels and a maximum width of say 1000 pixels.
158

159
00:13:46,900 --> 00:13:55,480
Then in this case our code inside these brackets is only going to be triggered and used on a viewport
159

160
00:13:55,690 --> 00:14:03,940
that is greater than 900 pixels but less than 1000 pixels, so there's only a 100 pixel gap where this
160

161
00:14:03,940 --> 00:14:05,490
code is going to work.
161

162
00:14:05,600 --> 00:14:07,590
So let me show you what this looks like.
162

163
00:14:08,080 --> 00:14:15,730
So you can see that normally we have our 30 pixel h1, and when it's really small we still have a 30
163

164
00:14:15,730 --> 00:14:16,830
pixel h1.
164

165
00:14:16,870 --> 00:14:25,690
But I flashed through the middle because I want to show you that there's a small 100 pixel gap where
165

166
00:14:25,780 --> 00:14:34,960
we reach 900 pixels but before 1000 pixels that our h1 is changed by our code in here.
166

167
00:14:35,040 --> 00:14:40,590
So you notice just now that I used a few different words and this is something that you have to be really
167

168
00:14:40,590 --> 00:14:44,930
careful about when somebody else talks about the size of something,
168

169
00:14:44,940 --> 00:14:45,240
right?
169

170
00:14:45,240 --> 00:14:50,800
So for example you can have something that is the size of the device.
170

171
00:14:50,820 --> 00:14:52,860
So this is a fixed thing.
171

172
00:14:52,860 --> 00:15:00,270
So, for example, your laptop is going to have a larger device width than the tablet, and you can't change
172

173
00:15:00,330 --> 00:15:05,880
the device width unless, you know, you decide to saw it in half or something, which probably won't work anymore.
173

174
00:15:05,880 --> 00:15:08,570
Don't do this at home please. Don’t blame me on this.
174

175
00:15:08,670 --> 00:15:13,340
I don't want anybody’s parents or spouses to blame me for their broken TVs.
175

176
00:15:13,530 --> 00:15:16,590
But your device width doesn't change. Now,
176

177
00:15:16,620 --> 00:15:19,820
the other thing that we talk about is your browser size.
177

178
00:15:19,830 --> 00:15:24,040
Now, as you saw, I can change my browser size simply by toggling it left and right.
178

179
00:15:24,420 --> 00:15:29,490
Now, the last thing, which is what we tend to talk about when we're talking about responsiveness is the
179

180
00:15:29,490 --> 00:15:30,490
viewport.
180

181
00:15:30,600 --> 00:15:35,100
And this is the size of the screen that your web site is being displayed on.
181

182
00:15:35,220 --> 00:15:40,290
So all of these terms mean different things and it's really important that you remember what they mean
182

183
00:15:40,950 --> 00:15:44,370
when we refer to it because otherwise you get a little bit confusing.
183

184
00:15:44,370 --> 00:15:48,660
All right. So let's head back to apply what we just learned to our project.
184

185
00:15:48,660 --> 00:15:56,070
So what we need to happen is that when we go into the tablet size or smaller we need to change the position
185

186
00:15:56,430 --> 00:16:02,940
of our image from position absolute, where it’s taken out of the HTML flow and it doesn't take up its
186

187
00:16:03,000 --> 00:16:05,860
own space, even when you can't even see it anymore,
187

188
00:16:05,880 --> 00:16:07,050
like in this case.
188

189
00:16:07,140 --> 00:16:13,890
So, in order to do that, we have to change the position of this to static when it's being displayed on
189

190
00:16:13,890 --> 00:16:14,810
a smaller screen
190

191
00:16:14,820 --> 00:16:18,500
so it starts taking up the full amount of space that it needs again.
191

192
00:16:18,690 --> 00:16:24,840
Now the other thing I want, I want it to transform and rotate back into the straight axes.
192

193
00:16:24,840 --> 00:16:32,570
So I want that image to be straight and not tilted like we have in the laptop size.
193

194
00:16:32,610 --> 00:16:37,510
And finally I want the text in this title to be center aligned
194

195
00:16:37,680 --> 00:16:43,410
when we're on the tablet and mobile size, so it doesn't look so weird being left aligned.
195

196
00:16:43,410 --> 00:16:49,490
And, in terms of Bootstrap grids, you can see the point at which the medium size triggers.
196

197
00:16:49,530 --> 00:16:52,590
So the tablet size triggers right here.
197

198
00:16:52,680 --> 00:16:58,230
And, if you open up Chrome Developer Tools, and we're just not actually using the panel, if we just drop
198

199
00:16:58,230 --> 00:17:04,560
it down, you can see that on the right up here we've got the width being displayed as I toggle it.
199

200
00:17:04,560 --> 00:17:11,460
So let's take a look at our web site design and see at which width or at which point does our design
200

201
00:17:11,460 --> 00:17:12,750
start getting weird.
201

202
00:17:12,750 --> 00:17:20,160
So as we get narrower and narrower our title and our images are being kind of squished together more
202

203
00:17:20,160 --> 00:17:20,810
and more.
203

204
00:17:20,820 --> 00:17:26,670
So at this point we're at what, 128, and this still looks good, but any smaller than
204

205
00:17:26,670 --> 00:17:29,540
that then it starts looking kind of weird.
205

206
00:17:29,580 --> 00:17:33,470
So let's target that size with a media query.
206

207
00:17:33,540 --> 00:17:38,220
So we're going to create a media query just by using the media keyword, then we're going to say the width
207

208
00:17:38,250 --> 00:17:43,690
that we want to target, and in this case I'm going to use max-width, because this is going to refer to
208

209
00:17:43,680 --> 00:17:53,440
the viewport sizes where the width is, say, 128 pixels and below, which is going smaller and smaller.
209

210
00:17:53,460 --> 00:17:57,950
So this is a good point, I think, to start changing the CSS.
210

211
00:17:58,170 --> 00:18:08,680
So at this point in, not really time, but in a viewport width, I'm going to change the title image. So you
211

212
00:18:08,680 --> 00:18:12,610
would write your CSS just as you would write it inside anywhere else,
212

213
00:18:12,610 --> 00:18:18,700
but it's now inside this media query, where this code only gets carried out under the conditions where
213

214
00:18:18,700 --> 00:18:19,590
this is true.
214

215
00:18:19,690 --> 00:18:26,500
So when our viewport is 1028 pixels or smaller, then we want to change our position back
215

216
00:18:26,500 --> 00:18:27,800
to static.
216

217
00:18:28,120 --> 00:18:35,950
And if I hit save and refresh then you'll notice that when I get into the smaller sizes, when I go past
217

218
00:18:35,950 --> 00:18:41,060
that break point, then our image becomes the original static size.
218

219
00:18:41,080 --> 00:18:47,350
So it's back into the flow of the HTML, and it's not getting cut off by anything else.
219

220
00:18:47,350 --> 00:18:53,380
Now the next thing we want to do is to rotate it back to the center. So to do this we have to use the
220

221
00:18:53,380 --> 00:18:55,870
transform property.
221

222
00:18:56,020 --> 00:18:57,810
And we're going to rotate it.
222

223
00:18:57,820 --> 00:19:04,060
Now you might think that you need to rotate it backwards so you say minus however many degrees.
223

224
00:19:04,210 --> 00:19:06,960
But actually this is the absolute rotation.
224

225
00:19:07,030 --> 00:19:11,880
So this is rotate back to zero which means that it's straight up.
225

226
00:19:11,890 --> 00:19:19,780
So let's hit save and refresh and you can see now, on the tablet size and mobile size, we're getting
226

227
00:19:19,840 --> 00:19:26,910
a vertical phone with the image and it’s now taking up the entire space of our title section.
227

228
00:19:26,950 --> 00:19:29,140
It's not being cut off at all.
228

229
00:19:29,140 --> 00:19:35,950
So now the last thing I want to do is I want to make everything inside this title section center aligned,
229

230
00:19:36,220 --> 00:19:42,640
because it looks very very weird at the moment being left aligned when it's this small. So we can do
230

231
00:19:42,640 --> 00:19:50,640
that by adding the title selector, and we're going to say text-align center.
231

232
00:19:50,740 --> 00:19:57,300
So now you'll see that our web site looks beautiful on mobile
232

233
00:19:58,530 --> 00:20:09,260
and tablet, and also looks great on laptop and desktop, and we've managed to do all of that simply by
233

234
00:20:09,290 --> 00:20:16,010
using the CSS breakpoints. And what you'll find is that, generally, with broad stroke responsiveness, you
234

235
00:20:16,010 --> 00:20:22,070
can do a lot of that with Bootstrap grids, but for fine tuning and for really narrowing down on the
235

236
00:20:22,070 --> 00:20:30,050
exact design you want for mobile, tablet and laptop, you will often find yourself using these CSS media
236

237
00:20:30,050 --> 00:20:30,860
queries.
237

238
00:20:30,860 --> 00:20:36,470
So when you're designing a responsive web site there's really two ways or two directions where you can
238

239
00:20:36,470 --> 00:20:37,540
go about doing this.
239

240
00:20:37,550 --> 00:20:39,950
You can either go mobile first, 
240

241
00:20:40,100 --> 00:20:47,420
so you start designing a web site at sort of this size, and then you start looking at how you can make
241

242
00:20:47,420 --> 00:20:54,220
it look good on laptop, or the other way, which is what we've done basically, is designed our web site for
242

243
00:20:54,230 --> 00:20:59,750
desktop and then made it responsive and look good on the smaller sizes.
243

244
00:20:59,780 --> 00:21:03,530
Now there's a lot of debate about which direction is better,
244

245
00:21:03,530 --> 00:21:07,760
but what I recommend is that you actually try doing it both ways,
245

246
00:21:07,760 --> 00:21:15,320
so starting by designing and creating your HTML and CSS for a mobile size web site, and then trying to
246

247
00:21:15,320 --> 00:21:22,010
make it responsive on tablet and laptop, and also going the other direction for maybe another web site
247

248
00:21:22,010 --> 00:21:28,730
project, and you'll find out which you prefer. And it's better to just try it out for yourself, because
248

249
00:21:28,730 --> 00:21:30,780
if you do it well the end result looks similar, 
249

250
00:21:30,920 --> 00:21:35,770
but people tend to have a preference as to which direction they create their web sites,
250

251
00:21:35,780 --> 00:21:37,540
so it's a good thing to explore.
251

252
00:21:37,910 --> 00:21:46,250
Now, in the next lesson we've got another challenge for you, and I want you to complete this web site by
252

253
00:21:46,250 --> 00:21:50,510
completing the last call to action section and also the footer.
253

254
00:21:50,720 --> 00:21:57,020
Now there's nothing new here that you haven't learned before but you'll be doing it yourself and it's
254

255
00:21:57,020 --> 00:21:58,100
going to be a lot of fun.
255

256
00:21:58,100 --> 00:22:02,430
So head over there once you're ready and get started with the next challenge.