Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
0
1
00:00:00,610 --> 00:00:01,200
All right.
1
2
00:00:01,210 --> 00:00:08,930
So this is looking pretty awesome already but we can make it look even better.
2
3
00:00:09,120 --> 00:00:16,200
So one of the things that bothers me a little bit is the fact that this image takes up so much space
3
4
00:00:16,530 --> 00:00:22,230
that our top title section is a lot bigger than it needs to be.
4
5
00:00:22,230 --> 00:00:31,950
So what I would like to happen is what if we can make this image show up behind this features page and
5
6
00:00:31,950 --> 00:00:38,090
thereby making this top section more compact and makes our web site look a lot more together.
6
7
00:00:38,460 --> 00:00:46,470
So in order to achieve this look we have to understand a more advanced CSS concept which is the
7
8
00:00:46,470 --> 00:00:47,140
z-index.
8
9
00:00:47,220 --> 00:00:55,440
So we know that each element on screen has a x and y position so we can move this image up or to the
9
10
00:00:55,440 --> 00:00:57,990
right or to the left or downwards.
10
11
00:00:57,990 --> 00:01:06,150
But it's also got a z position or a z-index i.e. whether it it's more towards you or if it's going
11
12
00:01:06,210 --> 00:01:07,510
away from you.
12
13
00:01:07,740 --> 00:01:15,540
So, in order to make this image go behind this feature section, we have to make the image’s z-index
13
14
00:01:15,840 --> 00:01:20,990
lower than this section so that it goes behind this section.
14
15
00:01:20,990 --> 00:01:25,950
Now this is an advanced CSS concept, which is why we're covering it only now.
15
16
00:01:26,280 --> 00:01:31,500
And it's something that even fully fledged web designers and developers understand poorly.
16
17
00:01:31,500 --> 00:01:37,140
So we're going to tackle it at this stage when we've already pretty much gotten to grips with the basic
17
18
00:01:37,190 --> 00:01:39,400
CSS and Bootstrap.
18
19
00:01:39,420 --> 00:01:45,480
So I'm going to create a new Code Ply so I can show you fully how this works, and I'm going to create
19
20
00:01:45,480 --> 00:01:48,240
three divs. Let’s call the first one,
20
21
00:01:48,270 --> 00:02:00,550
give it a class of red, and we'll call this one red, and then we'll have a yellow and a blue.
21
22
00:02:01,020 --> 00:02:12,000
So I'm going to make all three of these divs have a height of 100 pixels and a width of 100 pixels.
22
23
00:02:13,170 --> 00:02:19,580
And then I'm going to give them all a border of say 1 pixel solid.
23
24
00:02:19,820 --> 00:02:25,110
And now I'm going to add some different colors to each of these divs.
24
25
00:02:25,330 --> 00:02:35,420
So let's say red will have a background color of red and then yellow,
25
26
00:02:35,500 --> 00:02:38,190
same thing,
26
27
00:02:38,290 --> 00:02:42,430
and finally blue. All right. Cool.
27
28
00:02:42,450 --> 00:02:53,790
So now if I hit run we should see three squares that are red, I should have renamed this red, yellow and
28
29
00:02:54,720 --> 00:02:55,160
blue.
29
30
00:02:55,320 --> 00:03:01,370
So we've got red, yellow and blue, three boxes that are showing up one on top of each other,
30
31
00:03:01,620 --> 00:03:08,220
because at the moment their position is by default static so they stack and they don't combine into
31
32
00:03:08,220 --> 00:03:09,840
the same line.
32
33
00:03:09,840 --> 00:03:16,050
Now the easiest way of making something show up on top of another thing is nesting it.
33
34
00:03:16,080 --> 00:03:23,040
So say if we put the yellow div, instead of next to, or at the same hierarchical level as the red div, let's
34
35
00:03:23,040 --> 00:03:25,520
say that we put it inside the red div.
35
36
00:03:25,620 --> 00:03:29,960
Now this yellow div becomes a child of the red div.
36
37
00:03:29,970 --> 00:03:34,560
And as we learned from before, children sit on top of their parent.
37
38
00:03:34,590 --> 00:03:39,660
So the yellow div is currently sitting on top of the red div.
38
39
00:03:39,690 --> 00:03:46,380
But, other than this, if they were positioned at the same hierarchical level, all the HTML elements
39
40
00:03:46,440 --> 00:03:48,730
have a natural stacking order.
40
41
00:03:48,810 --> 00:03:56,050
So that means that whatever comes first in the HTML code, so closer to the top of the file, will be closer
41
42
00:03:56,070 --> 00:03:57,260
to the back.
42
43
00:03:57,480 --> 00:04:04,020
And, as you go down in the HTML file, we come further and further forwards towards ourselves and away
43
44
00:04:04,020 --> 00:04:06,740
from the screen. So I can show you that a little bit better
44
45
00:04:06,780 --> 00:04:15,540
if I made all the divs position absolute, because at the moment all our divs are not overlapping, they're
45
46
00:04:15,540 --> 00:04:18,670
occupying a full row all to themselves.
46
47
00:04:18,750 --> 00:04:21,810
And that's because they are by default position static.
47
48
00:04:21,810 --> 00:04:25,880
Now if anything that I've just said about positioning is confusing to you at all,
48
49
00:04:25,950 --> 00:04:32,910
make sure that you go back to the CSS section and check out the lecture on positioning, where we talk
49
50
00:04:32,910 --> 00:04:36,370
about absolute, relative, static, and all of those things.
50
51
00:04:36,390 --> 00:04:41,220
Now for this part I'm going to assume that you know what absolute does which is basically take out the
51
52
00:04:41,220 --> 00:04:43,950
elements out of the HTML flow.
52
53
00:04:43,950 --> 00:04:50,610
So, if I run it right now, you see that all we have is a single blue div, and that's not true.
53
54
00:04:50,610 --> 00:04:56,460
It's actually the blue div sitting on top of the yellow div sitting on top of the red div, but because
54
55
00:04:56,460 --> 00:05:02,310
they're all the same size and they've all been taken out of the HTML flow, they’re now currently all positioned
55
56
00:05:02,370 --> 00:05:04,400
exactly on top of each other.
56
57
00:05:04,500 --> 00:05:13,680
But, say if I go into the yellow div and I add a, I don’t know, left 20 margin and a top 20 pixel margin,
57
58
00:05:14,040 --> 00:05:25,290
and then I maybe go into and maybe I put let's say we'll probably need 40 pixels left and 40 pixels
58
59
00:05:26,070 --> 00:05:29,480
from the top for the blue div.
59
60
00:05:29,490 --> 00:05:34,670
Now if I hit run you can see that we've got three divs stacked on top of each other.
60
61
00:05:34,680 --> 00:05:41,010
It's much easier to see the natural stacking order which is which is if you remember that the things
61
62
00:05:41,040 --> 00:05:46,110
that come first in the HTML will be right at the back,
62
63
00:05:46,200 --> 00:05:54,120
and then, as we go down the HTML file, every other element becomes stacked on top of the previous elements.
63
64
00:05:54,120 --> 00:05:57,840
So this is the natural stacking order,
64
65
00:05:57,930 --> 00:06:00,870
just based on the order in the HTML code.
65
66
00:06:00,900 --> 00:06:03,270
So one way of changing the stacking order,
66
67
00:06:03,270 --> 00:06:09,600
for example if we wanted the yellow div to be on top at the same position as it is right now, we can
67
68
00:06:09,600 --> 00:06:12,680
move it further down in the HTML code.
68
69
00:06:12,690 --> 00:06:15,900
So if I hit run you'll see that now yellow is on top.
69
70
00:06:15,900 --> 00:06:19,980
It's still at the same position in terms of the x and the y,
70
71
00:06:20,070 --> 00:06:27,960
but in terms of its stacking order it's now the most in front because it's at the bottom of the HTML
71
72
00:06:27,990 --> 00:06:29,040
file.
72
73
00:06:29,040 --> 00:06:34,750
Now let's just undo that because there's other ways of changing the stacking order.
73
74
00:06:34,800 --> 00:06:40,650
You don't really want to have to go into HTML and move bits of code around just in order to
74
75
00:06:40,650 --> 00:06:42,510
change how it's stacked, right?
75
76
00:06:42,510 --> 00:06:49,470
You want to use CSS, and in order to use the CSS to change the stacking order, we have to use the
76
77
00:06:49,470 --> 00:06:51,650
property called the z-index.
77
78
00:06:51,810 --> 00:07:01,470
So, for example, if we change the z-index of the red div, which is currently the bottom most div, if I
78
79
00:07:01,470 --> 00:07:10,980
change the z-index to 1 and I hit run, then you'll see that the red div is now brought in front of
79
80
00:07:11,070 --> 00:07:18,150
all the other divs and it's now the closest to the user and further away from the screen.
80
81
00:07:18,150 --> 00:07:22,740
Now, what if we change the third div’s z-index? Let’s make it -1.
81
82
00:07:22,740 --> 00:07:27,630
So before I hit run just remind ourselves that blue is currently second in the stack.
82
83
00:07:27,630 --> 00:07:29,570
It's yellow then blue then red,
83
84
00:07:29,580 --> 00:07:30,010
yeah?
84
85
00:07:30,240 --> 00:07:36,240
So now if we watch this, now that I've changed blue’s z-index to -1, you can see that it now
85
86
00:07:36,240 --> 00:07:38,100
stacks at the bottom.
86
87
00:07:38,190 --> 00:07:40,040
It's below the yellow.
87
88
00:07:40,200 --> 00:07:46,500
So, from this little experiment, you can see that the default z-index for all your elements is actually
88
89
00:07:46,500 --> 00:07:47,280
0,
89
90
00:07:47,430 --> 00:07:54,470
because by changing one div’s z-index to 1, we've made it show up above everything else, and by changing
90
91
00:07:54,470 --> 00:07:56,820
another one’s z-index to -1,
91
92
00:07:56,870 --> 00:08:03,320
we’ve made it show up behind everything else. But you have to remember that the z-index is just one
92
93
00:08:03,350 --> 00:08:06,580
of many things that affects the stacking order.
93
94
00:08:06,590 --> 00:08:10,360
For example, let's say that we change every body's z-index,
94
95
00:08:10,360 --> 00:08:16,760
so every single element, into -1, so they all have the same z-index.
95
96
00:08:16,760 --> 00:08:24,080
You can see that we revert back to the original stacking order that is based off the order of our code
96
97
00:08:24,110 --> 00:08:25,370
in the HTML file.
97
98
00:08:25,370 --> 00:08:27,840
So red then yellow then blue.
98
99
00:08:27,890 --> 00:08:34,730
So this is why the stacking order and using the z-index is such a complicated thing, because many many
99
100
00:08:34,730 --> 00:08:42,770
things affect how your HTML elements stack on the screen. And just to make things even more complicated,
100
101
00:08:42,800 --> 00:08:50,790
you have to remember that the z-index only works if your elements are positioned, so it has a positioning.
101
102
00:08:50,870 --> 00:08:57,890
So, if I delete that position property, so all the divs now become positioned statically, i.e. they don't
102
103
00:08:57,890 --> 00:09:00,790
have an explicit position set,
103
104
00:09:01,070 --> 00:09:08,650
and then I go into here and I change the z-indexes from, let's say make this one
104
105
00:09:08,800 --> 00:09:11,560
1, change the middle one to 0,
105
106
00:09:11,600 --> 00:09:13,550
and the last one to -1,
106
107
00:09:13,550 --> 00:09:19,580
so what you would expect with this code is that the red div should show up on top, then it's
107
108
00:09:19,580 --> 00:09:20,120
yellow,
108
109
00:09:20,120 --> 00:09:24,300
then finally it's blue right at the bottom, so basically reversing the current order.
109
110
00:09:24,590 --> 00:09:29,260
But you can see, because I deleted that position properties setting to absolute,
110
111
00:09:29,420 --> 00:09:31,340
it doesn't actually stack.
111
112
00:09:31,580 --> 00:09:35,810
And even if I forced it to stack it will not obey this order.
112
113
00:09:35,810 --> 00:09:41,390
Now you might think that it's not working because at the moment my divs are not overlapping but that's
113
114
00:09:41,390 --> 00:09:42,880
actually not true.
114
115
00:09:43,010 --> 00:09:55,640
So let's say that if I only make the first div, my red div, positioned absolute, so my red div is now
115
116
00:09:55,640 --> 00:09:56,300
positioned
116
117
00:09:56,420 --> 00:10:00,740
absolute. I'm going to delete the z-index from the last div,
117
118
00:10:00,770 --> 00:10:10,460
so making it revert back to 0. And then I'm going to make the first div have a z-index of 1,
118
119
00:10:10,730 --> 00:10:15,710
but the second one to have a z-index of 10.
119
120
00:10:15,710 --> 00:10:22,810
So if the z-index for the yellow div in fact worked then it should be stacked on top of everything.
120
121
00:10:23,030 --> 00:10:24,950
As you'll see if I hit run,
121
122
00:10:25,130 --> 00:10:26,210
it doesn't.
122
123
00:10:26,210 --> 00:10:32,860
And the reason is because it's not positioned, it doesn't have a position relative or a position absolute.
123
124
00:10:32,990 --> 00:10:34,630
It's still static.
124
125
00:10:34,640 --> 00:10:41,240
And what I'm trying to show you is that when you have an element that is not positioned, where you haven't
125
126
00:10:41,240 --> 00:10:47,240
set it to absolute, relative or fixed, then the z-index does not apply.
126
127
00:10:47,390 --> 00:10:53,560
But as long as we give it a position, let's say relative,
127
128
00:10:53,870 --> 00:10:56,340
if I hit run you can see it's now on top,
128
129
00:10:56,480 --> 00:11:01,280
if I change it to absolute you'll see that it's still on top,
129
130
00:11:01,280 --> 00:11:06,270
if I change it to fixed it's still on top.
130
131
00:11:06,290 --> 00:11:12,810
So the only one that doesn't work is position static which is the same as no position defined.
131
132
00:11:12,840 --> 00:11:18,620
So as you can imagine when you're trying to affect the stacking order of your elements on your web site
132
133
00:11:18,680 --> 00:11:22,040
it can get pretty complicated pretty fast.
133
134
00:11:22,040 --> 00:11:23,920
But I'm going to help you through this.
134
135
00:11:24,020 --> 00:11:31,370
I've made a flowchart to help you figure out which element is on top and you can use it to ascertain
135
136
00:11:31,610 --> 00:11:37,850
between two elements, which one is going to be on top of the other one, and you'll find that this is going
136
137
00:11:37,850 --> 00:11:41,730
to be pretty helpful as we get onto the challenges.
137
138
00:11:41,830 --> 00:11:44,250
And let me introduce you to the first challenge.
138
139
00:11:44,390 --> 00:11:50,600
I want you to use the flow chart and what you've learned about the z-index and stacking order to make
139
140
00:11:50,690 --> 00:11:56,580
our phone image hide behind the feature section.
140
141
00:11:56,690 --> 00:12:01,550
And I have to give you a hint. Remember that this section is actually not white.
141
142
00:12:01,550 --> 00:12:03,650
It's see through by default.
142
143
00:12:03,650 --> 00:12:10,670
So you need to make this section background color white explicitly if you want it to be able to cover
143
144
00:12:10,670 --> 00:12:11,840
the image.
144
145
00:12:11,840 --> 00:12:17,480
Now, with that hint and all of your knowledge that you've gained up till now, plus this pdf that you're
145
146
00:12:17,480 --> 00:12:23,600
going to be able to download in the resources section for this lesson, I want you to try and give this challenge
146
147
00:12:23,660 --> 00:12:24,410
a go.
147
148
00:12:24,620 --> 00:12:31,390
So the outcome that you're aiming for is the image hidden behind this feature section.
148
149
00:12:31,430 --> 00:12:33,780
So pause the video and give it a go.
149
150
00:12:36,660 --> 00:12:36,990
All right.
150
151
00:12:36,990 --> 00:12:43,260
So, in order to change this, we of course have to go into Atom and head over to our styles.css.
151
152
00:12:43,260 --> 00:12:53,160
Now the image in this case is called title-image, and the second section, the feature section, has an
152
153
00:12:53,160 --> 00:12:55,360
id of features.
153
154
00:12:55,440 --> 00:13:01,680
So the first thing that we said that we needed to do was to change the feature section’s background color
154
155
00:13:02,160 --> 00:13:07,120
to white in order to make sure that it's not transparent at all.
155
156
00:13:07,140 --> 00:13:11,450
So if it does sit on top of another element it will obscure it.
156
157
00:13:11,850 --> 00:13:13,540
OK so that's the first part.
157
158
00:13:13,590 --> 00:13:20,370
And at this point nothing really is going to change. Now the next part is that we have to make the title
158
159
00:13:20,370 --> 00:13:23,830
image go behind the features.
159
160
00:13:23,850 --> 00:13:32,460
So what if we changed it's z-index to -1, because, remember, all the elements by default have
160
161
00:13:32,460 --> 00:13:34,090
a z-index of 0,
161
162
00:13:34,260 --> 00:13:38,760
so by making something -1 it will make it go behind the other things.
162
163
00:13:38,760 --> 00:13:44,730
Now remember that in order for the z-index to work we need to do one more thing,
163
164
00:13:44,790 --> 00:13:52,320
and that's of course setting the position to absolute so that that z-index actually gets activated
164
165
00:13:52,680 --> 00:13:54,450
and will actually work.
165
166
00:13:54,690 --> 00:14:03,730
So the next thing is making our feature section go on top of the title image. So we can do that by,
166
167
00:14:03,750 --> 00:14:11,320
of course, first changing its position to absolute and then changing that z-index to 1.
167
168
00:14:11,340 --> 00:14:19,440
So now 1 is greater than -1, so features should sit on top of the title image and we should
168
169
00:14:19,440 --> 00:14:21,140
achieve what we're looking for.
169
170
00:14:21,300 --> 00:14:26,060
Let's hit save and see what happens when we hit run.
170
171
00:14:26,070 --> 00:14:28,090
So a couple of things just happened.
171
172
00:14:28,110 --> 00:14:35,070
The first thing is, remember that we said every element by default has a z-index of zero. By giving
172
173
00:14:35,070 --> 00:14:37,880
the title image a z-index of -1,
173
174
00:14:38,070 --> 00:14:45,480
we’ve effectively moved it behind this title section and now we can no longer see it because it's behind
174
175
00:14:45,510 --> 00:14:47,640
everything else. So we can't have that.
175
176
00:14:47,640 --> 00:14:49,300
So we have to delete that line.
176
177
00:14:49,530 --> 00:14:56,010
So what if we just changed the z-index of the features section to make it go on top of the title image?
177
178
00:14:56,190 --> 00:15:02,370
Well, the other problem that you might spot around here is that our feature section is actually behind
178
179
00:15:02,430 --> 00:15:10,140
here, and the reason is because we've changed the position of the feature section to absolute.
179
180
00:15:10,200 --> 00:15:15,170
And remember that takes any HTML element out of the flow of the document,
180
181
00:15:15,390 --> 00:15:20,850
so it's no longer stacking and following the natural order. So we can’t have that either.
181
182
00:15:20,850 --> 00:15:29,790
So why don't we change this to relative, which we know will keep the element in the HTML flow, but it will
182
183
00:15:29,820 --> 00:15:34,970
allow our features to have a position and we can give it a z-index
183
184
00:15:34,980 --> 00:15:36,130
in that case?
184
185
00:15:36,240 --> 00:15:40,760
So let's check to see if this configuration would work with our flowchart.
185
186
00:15:41,040 --> 00:15:43,830
So are they both positioned elements?
186
187
00:15:43,840 --> 00:15:44,820
Yeah they are.
187
188
00:15:44,820 --> 00:15:45,360
They're both.
188
189
00:15:45,360 --> 00:15:46,290
One is absolute.
189
190
00:15:46,290 --> 00:15:47,970
The other one is relative.
190
191
00:15:48,110 --> 00:15:50,160
Do they both have a z-index?
191
192
00:15:50,160 --> 00:15:54,600
No, in this case, because we had to remove the z-index from the title image.
192
193
00:15:54,870 --> 00:15:57,210
But does one of them have a z-index?
193
194
00:15:57,270 --> 00:15:57,750
Yes.
194
195
00:15:57,750 --> 00:16:00,240
Features section has as a z-index.
195
196
00:16:00,240 --> 00:16:03,440
Does one have a z-index greater than 0?
196
197
00:16:03,540 --> 00:16:05,620
Yes, one is greater than 0.
197
198
00:16:05,790 --> 00:16:09,940
So the element with a z-index greater than 0 is going to be on top.
198
199
00:16:10,080 --> 00:16:11,750
So this should work
199
200
00:16:11,790 --> 00:16:13,620
if everything else is OK.
200
201
00:16:13,800 --> 00:16:17,650
So let's hit save and let's go and refresh.
201
202
00:16:17,760 --> 00:16:20,540
Ah look, it's now working.
202
203
00:16:20,550 --> 00:16:27,780
Our image is partially hidden behind our feature section and everything else still looks exactly the
203
204
00:16:27,780 --> 00:16:29,110
way we left it.
204
205
00:16:29,160 --> 00:16:30,910
So that's pretty good.
205
206
00:16:30,930 --> 00:16:37,270
And if you got the solution right by using this particular set of CSS properties, then well done.
206
207
00:16:37,390 --> 00:16:38,480
That's pretty good.
207
208
00:16:38,500 --> 00:16:44,360
You've understood how the z-index works and I hope the flow chart has been useful. Now,
208
209
00:16:44,370 --> 00:16:51,510
just for bonus points, if you take a look at the flow chart you'll notice that positioned elements that
209
210
00:16:51,510 --> 00:16:58,840
come later in the HTML flow are on top even if they don't have a z-index.
210
211
00:16:58,950 --> 00:17:08,640
So what that means is that we can remove the second z-index here and simply leave it as positioned
211
212
00:17:08,700 --> 00:17:15,150
relative, because if we check our flow chart with this current configuration, are they both positioned
212
213
00:17:15,210 --> 00:17:16,020
elements?
213
214
00:17:16,020 --> 00:17:16,850
Yes.
214
215
00:17:16,980 --> 00:17:19,470
Do they both have a z-index?
215
216
00:17:19,470 --> 00:17:21,040
No.
216
217
00:17:21,060 --> 00:17:22,710
Does one of them have a z-index?
217
218
00:17:22,710 --> 00:17:25,900
No, actually, in this case neither of them have a z-index.
218
219
00:17:25,950 --> 00:17:31,130
So we go down to here. Is one below the other in the HTML flow?
219
220
00:17:31,260 --> 00:17:32,180
Well yes.
220
221
00:17:32,190 --> 00:17:35,310
Feature section is below the title image.
221
222
00:17:35,310 --> 00:17:39,480
So the one below in the HTML flow is going to be on top.
222
223
00:17:39,490 --> 00:17:48,360
So this says that our feature section should be on top even though we haven't actually set a z-index.
223
224
00:17:48,430 --> 00:17:55,510
So now let's go and refresh our page and you'll see that absolutely nothing has changed, because we've
224
225
00:17:55,510 --> 00:18:01,840
managed to make the stacking order work the way that we want it to by understanding not just the
225
226
00:18:01,840 --> 00:18:05,730
z-index, but also how other things affect the stacking order.
226
227
00:18:05,860 --> 00:18:12,280
So, when you find yourself wanting to adjust the stacking order of elements, I hope that this pdf will
227
228
00:18:12,280 --> 00:18:17,810
come in handy and you can follow the flow chart to figure out which one is on top.
228
229
00:18:17,800 --> 00:18:25,180
So there’s just one last thing that I want to adjust before we finish off, and that is, at the moment this title page
229
230
00:18:25,180 --> 00:18:30,460
feels slightly unbalanced. We’re cutting off a little bit too much of this image, and there's not enough
230
231
00:18:30,460 --> 00:18:34,900
space between the download buttons and the end of the section.
231
232
00:18:35,020 --> 00:18:39,880
So I really want to make that padding bottom a little bit larger so that we can push this section down
232
233
00:18:39,940 --> 00:18:41,060
a little bit more.
233
234
00:18:41,290 --> 00:18:48,610
So, to achieve that, if we take a look, we can see that our top section, or our title section, is contained
234
235
00:18:48,640 --> 00:18:57,220
inside a container-fluid. So the container-fluid has a padding top and bottom 3 percent and 15 percent
235
236
00:18:57,220 --> 00:18:57,990
left and right.
236
237
00:18:58,090 --> 00:19:03,850
So, if you switch on Pesticide, you can see that all of this is just the container-fluid.
237
238
00:19:03,850 --> 00:19:09,640
So if we made its padding a little bit larger, but only on the bottom, then we can actually achieve the
238
239
00:19:09,640 --> 00:19:11,140
effect that we want.
239
240
00:19:11,140 --> 00:19:18,820
So, for example, if we want to go for a dry run, we can select the container-fluid and change its padding
240
241
00:19:18,910 --> 00:19:19,580
bottom.
241
242
00:19:19,720 --> 00:19:22,230
So at the moment it's, what, 43, right?
242
243
00:19:22,240 --> 00:19:25,830
What if we changed that to, say, I don't know, 100?
243
244
00:19:25,960 --> 00:19:30,130
Then you can see that this looks a lot more
244
245
00:19:30,220 --> 00:19:35,590
this looks a lot more appealing seeing just a little bit more of that image and having a little bit
245
246
00:19:35,590 --> 00:19:36,650
more space.
246
247
00:19:36,700 --> 00:19:38,550
So let's go ahead and do it for real
247
248
00:19:38,560 --> 00:19:40,620
inside our style.css.
248
249
00:19:40,750 --> 00:19:45,410
We're going to change the container-fluid but we want to leave the other values the same.
249
250
00:19:45,460 --> 00:19:49,170
So I still want 3 percent on the top, 15 percent left and right,
250
251
00:19:49,390 --> 00:19:54,460
but I'm going to add a 7 percent padding to just the bottom.
251
252
00:19:54,460 --> 00:19:58,690
So remember when we only have three values for things like padding and margin,
252
253
00:19:58,690 --> 00:20:00,300
the first one is top,
253
254
00:20:00,340 --> 00:20:03,670
second one is left and right, and the last one is the bottom.
254
255
00:20:03,670 --> 00:20:10,660
So if we hit save and we refresh then you can see it's pretty much the same as what we saw previously
255
256
00:20:10,720 --> 00:20:14,070
when we tried to change it in Chrome Developer Tools.
256
257
00:20:14,090 --> 00:20:21,340
Now the next thing I want to change is it would be really nice if my image could align on the right
257
258
00:20:21,670 --> 00:20:23,820
with the end of my menu.
258
259
00:20:23,920 --> 00:20:29,560
At the moment it looks like it's a little bit too mushed to the left and I would really like to push it
259
260
00:20:29,890 --> 00:20:31,390
to the right a little bit.
260
261
00:20:31,510 --> 00:20:38,950
So to do that I can go into my image which is called title-image, and because it's already positioned
261
262
00:20:39,010 --> 00:20:47,680
absolute and I can specify that it should maybe just be 30 percent from the right.
262
263
00:20:47,680 --> 00:20:54,640
And if we hit save and refresh then you can see that the margin to the right is now a lot lower and
263
264
00:20:54,640 --> 00:21:00,410
it's only 30 percent and that distributes a little more to the right and looks a lot better.
264
265
00:21:00,460 --> 00:21:08,010
Now in the next lesson we're going to talk about another advanced CSS concept, which are responsive breakpoints
265
266
00:21:08,340 --> 00:21:16,360
and that will allow us to specify exactly how we want the CSS to change depending on the size of the
266
267
00:21:16,360 --> 00:21:17,370
screen.
267
268
00:21:17,620 --> 00:21:23,710
So we would be able to create responsive layouts without having to rely solely on the Bootstrap grid
268
269
00:21:23,710 --> 00:21:24,700
system.
269
270
00:21:24,700 --> 00:21:28,080
So for all of that and more, I'll see you on the next lesson.
29062
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.