All language subtitles for 5. Media Query Breakpoints

All right. So, in the last lesson, we managed to change the z-index, or rather the stacking order, of our
1

title image over here to make it display behind the feature section.
2

Now if we look closely, though, at this title section, there’s still a few teething problems.
3

Firstly, if I move this into mobile size, you can see that my image actually disappears, and it's also
4

still rotated, which is really odd.
5

The second thing is that, even when I'm in the mobile size when it's really small, my title is still left
6

aligned, which also looks very strange.
7

So how can we modify our web site’s looks on mobile?
8

Well so far the responsiveness that we're getting whereby, you know, that the left and the right parts
9

here are taking up 50 percent,
10

but then on mobile they go into 100 percent,
11

this is coming from Bootstrap grids, remember, and it works well enough.
12

But if we wanted to fine tune this, we’ll need to use another advanced feature of CSS, which are CSS media
13

queries. And I want to show you how you can actually use just plain old CSS
14

in order to produce responsive designs by learning about these media queries. So you might ask, you know,
15

why do I care, right?
16

Why do I care how good it looks?
17

Why do I have to make so many designs for how it looks on mobile as well as on web?
18

You know, why can't I just have one design and just be okay with it
19

looking good on the web, right?
20

Well the problem is that since about October ish 2016 the number of people who browsed the web on mobile
21

overtook those who browsed on desktop.
22

So there's actually more people right now who go on web sites from their phone than from a desktop computer
23

or a laptop.
24

So it really is the generation of mobile first and this is why we always have to think about responsiveness
25

whenever we design web sites.
26

Now what are some of the ways that we can deal with this?
27

Well, number one is do nothing, basically bury your head in the sand and pretend that nothing happened
28

and just you know make your normal desktop web sites and be done with it.
29

Well the problem is that you actually get punished for this kind of behavior.
30

So you may or may not know, but Google rankings are affected by whether if your web site is mobile friendly
31

or not, and there's in fact a really helpful web page where they allow you to put in the URL of your
32

web site and they will test to see how mobile friendly it is.
33

If it's not mobile friendly at all,
34

as in, it looks really awful and difficult to read on mobile, you get penalized in the Google search rankings,
35

and we all know nobody checks anything on google page two or page three.
36

So this really really does matter, especially if you're running a business, right? Now, how can we use a
37

web site to test this?
38

Well we can go to our trusty 90s web sites.
39

This one is a development design studio
40

called Lambsoft, and it's pretty interesting if you just take a look at it actually.
41

Firstly you get a whole 20 seconds of looking at their logo.
42

Then you get another 20 seconds of looking at this flash animation.
43

So it just repeats itself forever until either we die of boredom or 20 seconds is up.
44

And then, as if all of that wasn't enough, you get another flash animation for 15 seconds.
45

But, finally, we get on to the home page and it is Killer Web Site Development Lambsoft Productions.
46

Let me make your web site a place to be proud of.
47

I'm really not sure if we should be proud of this web site but it seemed like a relic from the 90s.
48

So maybe if we you know time travel then this is what was actually cool back then.
49

Anyways, this is clearly not a mobile optimized web site. I mean, just what happens, nothing happens, right?
50

So if we plug this into our Mobile-Friendly Test, let's paste that URL in here and let's hit Run Test.
51

Let's see what the verdict is from Google.
52

All right.
53

So definitely no.
54

Page is not mobile friendly.
55

The text is too small, the viewports are not set, and you will be punished on the Google search rankings.
56

So let's not do that. Let's not ignore mobile friendliness, and we have to do something.
57

So what can we do?
58

Well, we can either make a separate mobile site which redirects users if they're trying to browse from
59

mobile. And many large web sites actually do this.
60

For example, if you try to go onto Facebook on your mobile device, not through the app, but through your
61

browser, then you actually get redirected not to facebook.com but m.facebook.com. And that
62

m stands for mobile, because they've actually created a separate site that's laid out perfect for mobile
63

viewing, and you can go there on your normal laptop as well,
64

if you just head over to m.facebook.com. And you'll see how they've structured and designed the
65

web site completely differently from their desktop version in order to be more mobile friendly.
66

Now that's also a lot of work. You're kind of designing two separate web sites,
67

right?
68

So the third solution, and what I would recommend as the best solution, is to just make your web sites
69

responsive, so that it looks nice on desktop, on laptop, on iPad, on tablet, and on your mobile.
70

And that is what we're going to learn about today.
71

We're going to make our web site responsive not using external tools like Bootstrap or, you know, any
72

of the other frameworks, but we're going to use CSS native functionality, and the one that we'll be using
73

are media query breakpoints in order to achieve this responsiveness.
74

But firstly, what exactly are media queries?
75

Well, let's find out by creating a new Code Ply playground.
76

Now the first thing that I'm going to do is, I'm actually going to remove our Bootstrap framework, so
77

I'm going to go with No Framework, because as we said before this is a pure CSS feature,
78

it's not related to Bootstrap or even jQuery.
79

And in fact if you leave the Bootstrap framework, then it might actually affect the media queries.
80

So I want you to remove the framework completely and hit save.
81

Now we're going to create a new h1, just going to say Hello World.
82

And if I hit run you can see we've got this nice black text.
83

And as we all know we can go into the CSS and simply say something like, let's target the h1 and change
84

its color to red.
85

So we know that when I hit run it's going to change the text color to red.
86

Now what if I only want it to be red under certain conditions?
87

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

How can I affect my website on that kind of level?
89

Well, this is where media queries come in. So I can say @media, then I'm going to give it a statement
90

to evaluate whether it's true or false.
91

So I'm going to say @media print. So if our web site is under the condition of being printed, then this will
92

equal true,
93

and that means that all of this code inside the brackets will get carried out.
94

So now let's hit run and you can see that under normal conditions my web site just has an 1 that's
95

black. But
96

if I now hit print, you can see that the text is now red, and that comes from our handy media query.
97

Now there's other media queries apart from print.
98

There are things such as screen which is dependent on the screen size or screen resolution.
99

There's also another one, for example speech, which will be activated if the web site is being read to
100

a visually impaired person for example.
101

So we can use all of these different types for our media query, and this is kind of roughly how the media
102

queries are structured.
103

Firstly you have the @media keyword, which says that everything that comes afterwards is a media query.
104

The next thing is the type of media or medium that we are selecting on.
105

So the code should only be activated if the web site is being displayed on a screen, or if it's being
106

printed, or if it's on a screen reader, all of those kind of things.
107

And then the third thing is the feature.
108

So, as we said before, the media query is a query,
109

so we're checking to see if something is true or false.
110

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

is that its minimum width is 900 pixels,
112

so we're checking to see what size the web site is being rendered in.
113

Is it being rendered in something that's really large like a desktop computer?
114

Well, in that case we're going to change something. Now, instead of checking whether if our web site
115

is in the printed condition, we can also check for other things like screen resolution or screen size,
116

which is more applicable to when we want to make our web sites responsive.
117

So let's delete the print statement and let's say instead that under the conditions where our web site
118

has a max width of say 900 pixels. So we know from Code Ply's estimates that a laptop is roughly 1200
119

by 264 pixels and a tablet is roughly 880 pixels by 264, and the 880 is of course
120

the width.
121

So that means that if we say that under the conditions where the web site is being displayed and the
122

maximum width is 900 pixels,
123

so if the web site is 900 pixels in width or less, then we will change the h1's color to red.
124

So let's pop this out and we can see that on laptop size it is black,
125

h1 is black,
126

but as we get smaller and we go to the tablet size, you can see that our color just changed dramatically, it
127

just turned red. And when our web site is any size that's 900 pixels or smaller,
128

so tablet or mobile or, you know, any sort of small device, then we can change and affect our
129

CSS. So what might you want to change in here?
130

So, for example, what we might want is that, say, under normal conditions we want the h1 to be displayed
131

with a font size of say 30 pixels,
132

right?
133

So if I hit run you can see that it's roughly the same size as before,
134

it's long enough for somebody on a desktop size.
135

Now what if, when our screen gets smaller, say on a tablet or mobile, I want the font size to be a little
136

bit bigger so that it's easier to see?
137

So let's change the font size on mobile tablet to say 60 pixels, double the size.
138

So now if I hit run you can see that nothing really happens on the desktop laptop sizes,
139

but once I trip that breakpoint, that 900 pixel point, you can see it's right here,
140

then our font gets doubled in size and it's now much easier to see on a smartphone.
141

Now you might want to go the other way too.
142

Maybe you want the text to be smaller on the phone and larger on the desktop to take up more space that's
143

available.
144

But essentially we've managed to create a media query breakpoint at 900 pixels, where when
145

this becomes true, the code that's inside these brackets gets enacted, and we override the existing font
146

size with our font size for smaller devices.
147

Now, the wording of these breakpoints are a little bit confusing, I must admit, because you can have
148

max-width and you can have min-width.
149

So if the minimum width is 900 pixels then we're now targeting in the other direction. We're saying that
150

when our web site is being displayed on any device that's 900 pixels wide or greater, then we want to
151

change the font size.
152

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

but when I trip that 900 breakpoint and go into tablet or mobile, then it reverts to the normal styling.
154

So this media query is only valid from 900 pixels onwards.
155

Now, you can also use more than one parameter to really narrow down the range where you want this media
156

query to occur.
157

So for example you can combine a minimum width of say 900 pixels and a maximum width of say 1000 pixels.
158

Then in this case our code inside these brackets is only going to be triggered and used on a viewport
159

that is greater than 900 pixels but less than 1000 pixels, so there's only a 100 pixel gap where this
160

code is going to work.
161

So let me show you what this looks like.
162

So you can see that normally we have our 30 pixel h1, and when it's really small we still have a 30
163

pixel h1.
164

But I flashed through the middle because I want to show you that there's a small 100 pixel gap where
165

we reach 900 pixels but before 1000 pixels that our h1 is changed by our code in here.
166

So you notice just now that I used a few different words and this is something that you have to be really
167

careful about when somebody else talks about the size of something,
168

right?
169

So for example you can have something that is the size of the device.
170

So this is a fixed thing.
171

So, for example, your laptop is going to have a larger device width than the tablet, and you can't change
172

the device width unless, you know, you decide to saw it in half or something, which probably won't work anymore.
173

Don't do this at home please. Don’t blame me on this.
174

I don't want anybody’s parents or spouses to blame me for their broken TVs.
175

But your device width doesn't change. Now,
176

the other thing that we talk about is your browser size.
177

Now, as you saw, I can change my browser size simply by toggling it left and right.
178

Now, the last thing, which is what we tend to talk about when we're talking about responsiveness is the
179

viewport.
180

And this is the size of the screen that your web site is being displayed on.
181

So all of these terms mean different things and it's really important that you remember what they mean
182

when we refer to it because otherwise you get a little bit confusing.
183

All right. So let's head back to apply what we just learned to our project.
184

So what we need to happen is that when we go into the tablet size or smaller we need to change the position
185

of our image from position absolute, where it’s taken out of the HTML flow and it doesn't take up its
186

own space, even when you can't even see it anymore,
187

like in this case.
188

So, in order to do that, we have to change the position of this to static when it's being displayed on
189

a smaller screen
190

so it starts taking up the full amount of space that it needs again.
191

Now the other thing I want, I want it to transform and rotate back into the straight axes.
192

So I want that image to be straight and not tilted like we have in the laptop size.
193

And finally I want the text in this title to be center aligned
194

when we're on the tablet and mobile size, so it doesn't look so weird being left aligned.
195

And, in terms of Bootstrap grids, you can see the point at which the medium size triggers.
196

So the tablet size triggers right here.
197

And, if you open up Chrome Developer Tools, and we're just not actually using the panel, if we just drop
198

it down, you can see that on the right up here we've got the width being displayed as I toggle it.
199

So let's take a look at our web site design and see at which width or at which point does our design
200

start getting weird.
201

So as we get narrower and narrower our title and our images are being kind of squished together more
202

and more.
203

So at this point we're at what, 128, and this still looks good, but any smaller than
204

that then it starts looking kind of weird.
205

So let's target that size with a media query.
206

So we're going to create a media query just by using the media keyword, then we're going to say the width
207

that we want to target, and in this case I'm going to use max-width, because this is going to refer to
208

the viewport sizes where the width is, say, 128 pixels and below, which is going smaller and smaller.
209

So this is a good point, I think, to start changing the CSS.
210

So at this point in, not really time, but in a viewport width, I'm going to change the title image. So you
211

would write your CSS just as you would write it inside anywhere else,
212

but it's now inside this media query, where this code only gets carried out under the conditions where
213

this is true.
214

So when our viewport is 1028 pixels or smaller, then we want to change our position back
215

to static.
216

And if I hit save and refresh then you'll notice that when I get into the smaller sizes, when I go past
217

that break point, then our image becomes the original static size.
218

So it's back into the flow of the HTML, and it's not getting cut off by anything else.
219

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

transform property.
221

And we're going to rotate it.
222

Now you might think that you need to rotate it backwards so you say minus however many degrees.
223

But actually this is the absolute rotation.
224

So this is rotate back to zero which means that it's straight up.
225

So let's hit save and refresh and you can see now, on the tablet size and mobile size, we're getting
226

a vertical phone with the image and it’s now taking up the entire space of our title section.
227

It's not being cut off at all.
228

So now the last thing I want to do is I want to make everything inside this title section center aligned,
229

because it looks very very weird at the moment being left aligned when it's this small. So we can do
230

that by adding the title selector, and we're going to say text-align center.
231

So now you'll see that our web site looks beautiful on mobile
232

and tablet, and also looks great on laptop and desktop, and we've managed to do all of that simply by
233

using the CSS breakpoints. And what you'll find is that, generally, with broad stroke responsiveness, you
234

can do a lot of that with Bootstrap grids, but for fine tuning and for really narrowing down on the
235

exact design you want for mobile, tablet and laptop, you will often find yourself using these CSS media
236

queries.
237

So when you're designing a responsive web site there's really two ways or two directions where you can
238

go about doing this.
239

You can either go mobile first,
240

so you start designing a web site at sort of this size, and then you start looking at how you can make
241

it look good on laptop, or the other way, which is what we've done basically, is designed our web site for
242

desktop and then made it responsive and look good on the smaller sizes.
243

Now there's a lot of debate about which direction is better,
244

but what I recommend is that you actually try doing it both ways,
245

so starting by designing and creating your HTML and CSS for a mobile size web site, and then trying to
246

make it responsive on tablet and laptop, and also going the other direction for maybe another web site
247

project, and you'll find out which you prefer. And it's better to just try it out for yourself, because
248

if you do it well the end result looks similar,
249

but people tend to have a preference as to which direction they create their web sites,
250

so it's a good thing to explore.
251

Now, in the next lesson we've got another challenge for you, and I want you to complete this web site by
252

completing the last call to action section and also the footer.
253

Now there's nothing new here that you haven't learned before but you'll be doing it yourself and it's
254

going to be a lot of fun.
255

So head over there once you're ready and get started with the next challenge.