Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,210 --> 00:00:03,520
Now, there is one last thing I want
2
00:00:03,520 --> 00:00:05,280
to cover when we talk about styling
3
00:00:05,280 --> 00:00:07,040
and that will be media queries.
4
00:00:07,040 --> 00:00:09,420
Media queries, of course, often are important
5
00:00:09,420 --> 00:00:11,300
to get the right look.
6
00:00:11,300 --> 00:00:14,830
At the moment, if we preview this in a mobile device here,
7
00:00:14,830 --> 00:00:18,283
let's say the Pixel 2, doesn't matter which one you use,
8
00:00:19,250 --> 00:00:21,980
this is how it looks like, let me zoom in a bit.
9
00:00:21,980 --> 00:00:24,940
This is how it looks like and that's definitely all right.
10
00:00:24,940 --> 00:00:26,760
Right, of course, you might want to add more
11
00:00:26,760 --> 00:00:28,260
to make this look good on mobile
12
00:00:28,260 --> 00:00:31,370
but, from a pure styling perspective, that looks good.
13
00:00:31,370 --> 00:00:34,913
Nothing is going beyond the edges, so that looks okay.
14
00:00:35,840 --> 00:00:37,470
But maybe we want to make sure
15
00:00:37,470 --> 00:00:40,100
that this button actually spans
16
00:00:40,100 --> 00:00:43,400
the entire width, if we're on a small device.
17
00:00:43,400 --> 00:00:45,260
And only takes the space it needs,
18
00:00:45,260 --> 00:00:47,120
if we're not on a mobile device.
19
00:00:47,120 --> 00:00:48,590
And that would be a scenario,
20
00:00:48,590 --> 00:00:51,390
where we might want to use a media query.
21
00:00:51,390 --> 00:00:52,960
So, let's go back to the button,
22
00:00:52,960 --> 00:00:55,310
and how can we now add a media query here
23
00:00:55,310 --> 00:00:57,700
when we're using style components?
24
00:00:57,700 --> 00:00:59,700
It's actually super simple,
25
00:00:59,700 --> 00:01:01,827
you just add your media query here,
26
00:01:01,827 --> 00:01:04,810
@media, and define your criteria.
27
00:01:04,810 --> 00:01:08,620
For example, min-width 768 pixels.
28
00:01:08,620 --> 00:01:11,390
And now you just put the styles
29
00:01:11,390 --> 00:01:14,700
into that media query that should affect this element
30
00:01:14,700 --> 00:01:16,950
when that condition here is met.
31
00:01:16,950 --> 00:01:19,730
That's all, you need no selector in there, nothing else,
32
00:01:19,730 --> 00:01:22,840
just the styles that should be applied to this component,
33
00:01:22,840 --> 00:01:25,973
if this condition here for this media query is met.
34
00:01:27,010 --> 00:01:29,480
So, here that is actually now the media query
35
00:01:29,480 --> 00:01:33,570
for big devices, non-mobile devices,
36
00:01:33,570 --> 00:01:36,380
and there I wanna set the width to auto.
37
00:01:36,380 --> 00:01:41,020
The default width, so if the media query is not met,
38
00:01:41,020 --> 00:01:44,023
can be set to 100% and up there.
39
00:01:45,100 --> 00:01:46,690
And as a result, if we save this,
40
00:01:46,690 --> 00:01:49,670
we have that big button here on mobile.
41
00:01:49,670 --> 00:01:53,400
But if I go to a bigger screen here,
42
00:01:53,400 --> 00:01:55,090
by zooming out a bit, you see now
43
00:01:55,090 --> 00:01:57,970
the button only takes as much space as it needs.
44
00:01:57,970 --> 00:01:59,800
And keep in mind I'm zoomed in here,
45
00:01:59,800 --> 00:02:02,240
so that you can see things a bit better,
46
00:02:02,240 --> 00:02:04,650
which is why, for me, I have to drag quite
47
00:02:04,650 --> 00:02:06,823
a bit to go to this big screen mode.
48
00:02:07,870 --> 00:02:10,560
But this is now a media query in action
49
00:02:10,560 --> 00:02:14,940
and it's in action with the help of style components.
50
00:02:14,940 --> 00:02:17,770
So, style components, definitely a nice package
51
00:02:17,770 --> 00:02:21,040
for, well, styling components and ensuring
52
00:02:21,040 --> 00:02:23,250
that components really only affect
53
00:02:23,250 --> 00:02:25,293
the styles on which you set them up.
4187
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.
Afrikaans
Akan
Albanian
Amharic
Arabic
Armenian
Azerbaijani
Basque
Belarusian
Bemba
Bengali
Bihari
Bosnian
Breton
Bulgarian
Cambodian
Catalan
Cebuano
Cherokee
Chichewa
Chinese (Simplified)
Chinese (Traditional)
Corsican
Croatian
Czech
Danish
Dutch
English
Esperanto
Estonian
Faroese
Finnish
Galician
Georgian
German
Greek
Guarani
Haitian Creole
Hausa
Hawaiian
Hebrew
Hmong
Hungarian
Icelandic
Indonesian
Irish
Italian
Japanese
Kazakh
Kinyarwanda
Kirundi
Kongo
Korean
Krio (Sierra Leone)
Kurdish
Kyrgyz
Laothian
Latin
Latvian
Lithuanian
Luganda
Luo
Luxembourgish
Macedonian
Malagasy
Malay
Maltese
Maori
Mauritian Creole
Moldavian
Mongolian
Myanmar (Burmese)
Montenegrin
Nepali
Norwegian
Pashto
Polish
Portuguese (Brazil)
Portuguese (Portugal)
Quechua
Romanian
Romansh
Russian
Samoan
Scots Gaelic
Serbian
Sesotho
Setswana
Seychellois Creole
Shona
Sindhi
Sinhalese
Slovak
Slovenian
Somali
Spanish
Swedish
Tajik
Thai
Tigrinya
Tonga
Turkish
Turkmen
Ukrainian
Uzbek
Vietnamese
Welsh
Wolof