Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,240 --> 00:00:01,510
All right.
2
00:00:01,540 --> 00:00:07,780
Let's keep working on spacing some of this out a little better because you can see this section here
3
00:00:07,810 --> 00:00:11,290
is pushed all the way up against the left edge of the screen.
4
00:00:11,380 --> 00:00:17,140
So we're definitely going to want to move that but it's also way too close to the hero block and so
5
00:00:17,140 --> 00:00:22,870
I'm going to want to put some space in between these two sections as well along with putting a little
6
00:00:22,870 --> 00:00:25,990
more space in between the icon and the text right here.
7
00:00:25,990 --> 00:00:33,890
So those are as squished up either so we'll start with that one and we'll come down and on our image
8
00:00:34,280 --> 00:00:45,020
here on our actual image we'll say a class name of classes dot icon and we'll scroll up to set a icon
9
00:00:45,110 --> 00:00:52,330
style of margin left to em and we can save that.
10
00:00:52,370 --> 00:00:53,960
We'll see the page refresh.
11
00:00:53,970 --> 00:00:58,760
And now we've got a little more spacing in between there which I really like but there is one thing
12
00:00:58,760 --> 00:01:05,420
to keep in mind whenever we add spacing to something like that when we resize this and it gets down
13
00:01:05,420 --> 00:01:12,200
to the breakpoint where it's now being stacked on top of one another that to M to the left of the icon
14
00:01:12,410 --> 00:01:15,680
is still pushing that little space right there.
15
00:01:15,680 --> 00:01:20,080
And when we're stacked on top of one another we're definitely not going to want that.
16
00:01:20,090 --> 00:01:27,940
So let's make sure we come in and we'll add a theme dot breakpoints dot down for extra small.
17
00:01:28,040 --> 00:01:35,470
And here let's go and set that margin left to zero so that we'll totally get rid of it and if we save
18
00:01:35,500 --> 00:01:40,150
this we'll see the page refresh here and now it's flush against the screen.
19
00:01:40,480 --> 00:01:45,020
So as we size up it will maintain the correct styling and look way better.
20
00:01:45,130 --> 00:01:50,650
And we do still have a little point where it'll have that space but that's because we haven't gone in
21
00:01:50,890 --> 00:01:53,050
and styled it all the way yet.
22
00:01:53,080 --> 00:01:57,210
So we've still got a couple of things to do and that should take care of that.
23
00:01:57,220 --> 00:02:04,810
So now let's get some spacing between these two blocks here and we'll come down to our services blog
24
00:02:05,080 --> 00:02:14,350
and for this entire wrapping container we're going to add a class name here of classes dot services
25
00:02:14,410 --> 00:02:18,350
container or actually service containers.
26
00:02:18,350 --> 00:02:18,980
What I meant.
27
00:02:19,120 --> 00:02:28,510
And we'll come up to styles objects create our service container style with a margin top of twelve m
28
00:02:30,100 --> 00:02:31,810
to go ahead and save that.
29
00:02:31,810 --> 00:02:38,410
And that's going to put some spacing now up here on the top of our service section giving us a little
30
00:02:38,410 --> 00:02:41,330
buffer under our hero block.
31
00:02:41,400 --> 00:02:45,620
Now let's go and put that spacing on the side of this item here.
32
00:02:45,620 --> 00:02:53,870
And so actually for just the grid item wrapping just the text and those buttons here will add a style
33
00:02:54,260 --> 00:02:59,010
of a margin left five m.
34
00:02:59,180 --> 00:03:00,480
So we'll save that.
35
00:03:00,560 --> 00:03:05,300
And that will push that whole thing to give us a nice little border right there.
36
00:03:05,300 --> 00:03:11,030
And now that really looks great that I think looks exactly like the design file.
37
00:03:11,030 --> 00:03:15,460
And so now we just need to check out how it works on other sizes.
38
00:03:15,560 --> 00:03:22,010
So you'll see as we shrink down it maintains a pretty good look until it stacks on top of each other.
39
00:03:22,070 --> 00:03:25,870
And here this is obviously not the look that we are going for.
40
00:03:26,120 --> 00:03:30,190
And it does not look like how you would want something to look on a mobile site.
41
00:03:30,500 --> 00:03:36,790
So let's go ahead and center all of that up which will make you feel a lot cleaner.
42
00:03:36,790 --> 00:03:42,430
The problem though is that we don't want it to always be centered so up here you know this is the look
43
00:03:42,460 --> 00:03:44,470
that we want and that looks fine.
44
00:03:44,500 --> 00:03:50,020
So we only want to center it if we're down here at one of these smaller breakpoints.
45
00:03:50,350 --> 00:03:55,980
So what we need to do is get access to our media query system within our component.
46
00:03:56,320 --> 00:04:01,330
So let's go up and we will import under our typography component.
47
00:04:01,330 --> 00:04:13,870
Let's import use media query from material dash UI slash core slash use media query and then it will
48
00:04:13,870 --> 00:04:23,620
come down and underneath our theme constant let's create a constant of matches S M set that equal to
49
00:04:23,620 --> 00:04:34,610
our use media query function called with our theme dot breakpoint dot down for small then let's come
50
00:04:34,610 --> 00:04:37,640
down and on our services container here.
51
00:04:37,730 --> 00:04:40,790
Let's add a justify property
52
00:04:43,530 --> 00:04:50,310
and we'll set this equal to a ternary statement that is going to check our matches.
53
00:04:50,430 --> 00:04:52,310
S M media query.
54
00:04:52,410 --> 00:04:59,820
And if that is true we're going to set the justified to center so that we'll sensor up our items if
55
00:04:59,820 --> 00:05:07,680
we are at these small break point but if we are not then we can just leave this set to undefined.
56
00:05:08,100 --> 00:05:12,620
And that will be equivalent to not setting the property whatsoever.
57
00:05:12,630 --> 00:05:19,230
So if we go ahead and save this now we'll see the page refresh and it still looks fine at this screen
58
00:05:19,230 --> 00:05:28,230
size but as we start to then go smaller and smaller you'll see when all the sudden you see it jumps
59
00:05:28,230 --> 00:05:29,620
to being censored.
60
00:05:29,700 --> 00:05:36,510
And as we continue to then shrink the page you can see that it is now centered up on our smaller screen
61
00:05:36,570 --> 00:05:38,450
sizes.
62
00:05:38,500 --> 00:05:44,800
There are a couple problems though because our text is not all centered even though the icon is and
63
00:05:44,800 --> 00:05:50,350
we still have this extra little gap over here that we don't have on the right side and that's coming
64
00:05:50,350 --> 00:05:57,010
from our margin left that we needed to create the little border up on this size.
65
00:05:57,070 --> 00:06:00,710
But when we're down the smaller we're not going to need that.
66
00:06:00,760 --> 00:06:04,800
And so we can actually set this to a ternary statement as well.
67
00:06:04,960 --> 00:06:10,680
So inside of here for the margin left property let's check our matches.
68
00:06:10,690 --> 00:06:17,620
S M variable and if that's true we're actually going to set this to 0 and then otherwise we'll read
69
00:06:17,620 --> 00:06:22,000
it at our 5 m border so we can save this.
70
00:06:22,000 --> 00:06:29,640
We'll see the page refresh and now we don't have that extra spacing over to the left side to get our
71
00:06:29,640 --> 00:06:36,770
text all centered up though here on the smaller size we're gonna have to use the text align style.
72
00:06:36,810 --> 00:06:41,820
So on this grid item where we're already setting our margin of left.
73
00:06:41,820 --> 00:06:48,650
Let's go ahead and add the text align the property and we're also going to make this a ternary statement.
74
00:06:48,750 --> 00:06:56,430
So we'll set our matches as M and if that is true and we are at these small screen size let's go ahead
75
00:06:56,430 --> 00:06:58,760
and center all of our text up.
76
00:06:58,950 --> 00:07:02,320
Otherwise we'll set it to on defined.
77
00:07:02,430 --> 00:07:09,480
And now if we save this we'll see the page refresh and now all of our text including the button an icon
78
00:07:09,810 --> 00:07:16,710
is all very perfectly centered and now works very much more like something you would expect to see on
79
00:07:16,710 --> 00:07:23,070
a mobile site I'm going to nit pick just a little more though because we really don't want this icon
80
00:07:23,080 --> 00:07:26,050
in the learned button squished up next to each other like that.
81
00:07:26,350 --> 00:07:33,340
So when we're at this small breakpoint let's give a little bit of space between those two and so on
82
00:07:33,340 --> 00:07:36,710
our learn button style over here.
83
00:07:36,730 --> 00:07:40,650
The learn button style under the padding value.
84
00:07:40,720 --> 00:07:49,930
Let's go ahead and add a theme dot breakpoints dot down for small and if we're here at these small breakpoint
85
00:07:50,260 --> 00:07:58,210
on our learn button let's give it a margin bottom of to em and so that'll put a little margin underneath
86
00:07:58,240 --> 00:08:02,530
the learn button which should push that icon down so we'll save this.
87
00:08:02,560 --> 00:08:04,080
See the page refresh.
88
00:08:04,090 --> 00:08:10,150
And now we've got a nice little gap under their my very final complaint and tweak that.
89
00:08:10,150 --> 00:08:17,110
I'd like to make here is you can see when we're shrinking down the right here that's perfect example
90
00:08:17,290 --> 00:08:23,350
how the text will span all the way to the very very edge of the screen it's pushed all the way up right
91
00:08:23,350 --> 00:08:30,610
against it there before it then is resized and I think that I'd really rather it always have a bit of
92
00:08:30,610 --> 00:08:36,160
a border there and then be resized within that so that we're not squishing right up against the edge
93
00:08:36,160 --> 00:08:37,540
of the screen right there.
94
00:08:37,570 --> 00:08:44,710
So to do that we can come to the service container that we already had set up and let's add a theme
95
00:08:44,950 --> 00:08:53,200
dot breakpoints dot down for a small and if we're at the small breakpoint let's just add a padding of
96
00:08:53,250 --> 00:08:56,170
twenty five all the way around that text.
97
00:08:56,290 --> 00:09:02,590
And so if we save that now look right here and all the sudden you can see it's now smaller and resized
98
00:09:02,920 --> 00:09:09,280
and it will never touch the edge of the screen like that because of the padding that we've put around
99
00:09:09,280 --> 00:09:12,060
there so you can see this really looks great.
100
00:09:12,070 --> 00:09:13,560
And you can see it move.
101
00:09:13,660 --> 00:09:15,460
Switch back to the old style.
102
00:09:15,670 --> 00:09:19,360
And it looks good as far as we want it to be.
103
00:09:19,360 --> 00:09:28,000
So we have made this a perfectly responsive little section already and we're going to use this now to
104
00:09:28,090 --> 00:09:34,950
create the other services sections using the custom software development section as our template.
105
00:09:34,960 --> 00:09:38,740
So let's get started working on that in the next video.
11827
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.