Original subtitles

Now, there is one last thing I want

to cover when we talk about styling

and that will be media queries.

Media queries, of course, often are important

to get the right look.

At the moment, if we preview this in a mobile device here,

let's say the Pixel 2, doesn't matter which one you use,

this is how it looks like, let me zoom in a bit.

This is how it looks like and that's definitely all right.

Right, of course, you might want to add more

to make this look good on mobile

but, from a pure styling perspective, that looks good.

Nothing is going beyond the edges, so that looks okay.

But maybe we want to make sure

that this button actually spans

the entire width, if we're on a small device.

And only takes the space it needs,

if we're not on a mobile device.

And that would be a scenario,

where we might want to use a media query.

So, let's go back to the button,

and how can we now add a media query here

when we're using style components?

It's actually super simple,

you just add your media query here,

@media, and define your criteria.

For example, min-width 768 pixels.

And now you just put the styles

into that media query that should affect this element

when that condition here is met.

That's all, you need no selector in there, nothing else,

just the styles that should be applied to this component,

if this condition here for this media query is met.

So, here that is actually now the media query

for big devices, non-mobile devices,

and there I wanna set the width to auto.

The default width, so if the media query is not met,

can be set to 100% and up there.

And as a result, if we save this,

we have that big button here on mobile.

But if I go to a bigger screen here,

by zooming out a bit, you see now

the button only takes as much space as it needs.

And keep in mind I'm zoomed in here,

so that you can see things a bit better,

which is why, for me, I have to drag quite

a bit to go to this big screen mode.

But this is now a media query in action

and it's in action with the help of style components.

So, style components, definitely a nice package

for, well, styling components and ensuring

that components really only affect

the styles on which you set them up.