All language subtitles for 084 Media Query Breakpoints.en_US

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

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

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

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

still rotated, which is really odd.

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

aligned, which also looks very strange.

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

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

here are taking up 50 percent,

but then on mobile they go into 100 percent,

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

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

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

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

why do I care, right?

Why do I care how good it looks?

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

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

looking good on the web, right?

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

overtook those who browsed on desktop.

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

or a laptop.

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

whenever we design web sites.

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

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

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

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

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

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

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

If it's not mobile friendly at all,

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

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

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

web site to test this?

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

This one is a development design studio

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

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

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

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

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

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

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

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

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

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

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

Let's see what the verdict is from Google.

All right.

So definitely no.

Page is not mobile friendly.

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

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

So what can we do?

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

mobile. And many large web sites actually do this.

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

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

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

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

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

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

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

right?

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

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

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

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

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

are media query breakpoints in order to achieve this responsiveness.

But firstly, what exactly are media queries?

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

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

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

it's not related to Bootstrap or even jQuery.

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

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

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

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

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

its color to red.

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

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

So, say if I wanted to say that, only when my web site is being printed do I want the text to be red.

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

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

to evaluate whether it's true or false.

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

equal true,

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

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

black. But

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

Now there's other media queries apart from print.

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

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

a visually impaired person for example.

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

queries are structured.

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

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

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

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

And then the third thing is the feature.

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

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

So we can check to see, for example, if the media is a screen, i.e. being displayed on a device, and the feature

is that its minimum width is 900 pixels,

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

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

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

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

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

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

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

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

the width.

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

maximum width is 900 pixels,

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

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

h1 is black,

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

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

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

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

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

with a font size of say 30 pixels,

right?

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

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

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

bit bigger so that it's easier to see?

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

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

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

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

Now you might want to go the other way too.

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

available.

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

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

size with our font size for smaller devices.

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

max-width and you can have min-width.

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

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

change the font size.

So if I hit run now, you can see that when this is being displayed on a laptop or desktop size, it's massive,

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

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

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

query to occur.

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

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

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

code is going to work.

So let me show you what this looks like.

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

pixel h1.

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

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

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

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

right?

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

So this is a fixed thing.

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

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

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

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

But your device width doesn't change. Now,

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

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

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

viewport.

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

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

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

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

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

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

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

like in this case.

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

a smaller screen

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

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

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

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

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

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

So the tablet size triggers right here.

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

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

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

start getting weird.

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

and more.

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

that then it starts looking kind of weird.

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

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

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

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

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

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

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

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

this is true.

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

to static.

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

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

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

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

transform property.

And we're going to rotate it.

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

But actually this is the absolute rotation.

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

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

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

It's not being cut off at all.

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

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

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

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

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

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

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

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

queries.

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

go about doing this.

You can either go mobile first,

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

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

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

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

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

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

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

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

if you do it well the end result looks similar,

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

so it's a good thing to explore.

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

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

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

going to be a lot of fun.

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