1
00:00:00,610 --> 00:00:01,200
All right.

2
00:00:01,210 --> 00:00:08,930
So this is looking pretty awesome already but we can make it look even better.

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

4
00:00:16,530 --> 00:00:22,230
that our top title section is a lot bigger than it needs to be.

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

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.

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 

8
00:00:46,470 --> 00:00:47,140
z-index.

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

10
00:00:55,440 --> 00:00:57,990
right or to the left or downwards.

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

12
00:01:06,210 --> 00:01:07,510
away from you.

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

14
00:01:15,840 --> 00:01:20,990
lower than this section so that it goes behind this section.

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.

16
00:01:26,280 --> 00:01:31,500
And it's something that even fully fledged web designers and developers understand poorly.

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

18
00:01:37,190 --> 00:01:39,400
CSS and Bootstrap.

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

20
00:01:45,480 --> 00:01:48,240
three divs. Let’s call the first one,

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.

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.

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.

24
00:02:19,820 --> 00:02:25,110
And now I'm going to add some different colors to each of these divs.

25
00:02:25,330 --> 00:02:35,420
So let's say red will have a background color of red and then yellow,

26
00:02:35,500 --> 00:02:38,190
same thing,

27
00:02:38,290 --> 00:02:42,430
and finally blue. All right. Cool.

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

29
00:02:54,720 --> 00:02:55,160
blue.

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,

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

32
00:03:08,220 --> 00:03:09,840
the same line.

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.

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

35
00:03:23,040 --> 00:03:25,520
say that we put it inside the red div.

36
00:03:25,620 --> 00:03:29,960
Now this yellow div becomes a child of the red div.

37
00:03:29,970 --> 00:03:34,560
And as we learned from before, children sit on top of their parent.

38
00:03:34,590 --> 00:03:39,660
So the yellow div is currently sitting on top of the red div.

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

40
00:03:46,440 --> 00:03:48,730
have a natural stacking order.

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

42
00:03:56,070 --> 00:03:57,260
to the back.

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

44
00:04:04,020 --> 00:04:06,740
from the screen. So I can show you that a little bit better

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

46
00:04:15,540 --> 00:04:18,670
occupying a full row all to themselves.

47
00:04:18,750 --> 00:04:21,810
And that's because they are by default position static.

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,

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

50
00:04:32,910 --> 00:04:36,370
about absolute, relative, static, and all of those things.

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

52
00:04:41,220 --> 00:04:43,950
elements out of the HTML flow.

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.

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

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

56
00:05:02,370 --> 00:05:04,400
exactly on top of each other.

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,

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

59
00:05:26,070 --> 00:05:29,480
from the top for the blue div.

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.

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

62
00:05:41,040 --> 00:05:46,110
that come first in the HTML will be right at the back,

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.

64
00:05:54,120 --> 00:05:57,840
So this is the natural stacking order,

65
00:05:57,930 --> 00:06:00,870
just based on the order in the HTML code.

66
00:06:00,900 --> 00:06:03,270
So one way of changing the stacking order,

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

68
00:06:09,600 --> 00:06:12,680
move it further down in the HTML code.

69
00:06:12,690 --> 00:06:15,900
So if I hit run you'll see that now yellow is on top.

70
00:06:15,900 --> 00:06:19,980
It's still at the same position in terms of the x and the y,

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 

72
00:06:27,990 --> 00:06:29,040
file.

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.

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

75
00:06:40,650 --> 00:06:42,510
change how it's stacked, right?

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

77
00:06:49,470 --> 00:06:51,650
property called the z-index.

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

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

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.

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.

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.

83
00:07:27,630 --> 00:07:29,570
It's yellow then blue then red,

84
00:07:29,580 --> 00:07:30,010
yeah?

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

86
00:07:36,240 --> 00:07:38,100
stacks at the bottom.

87
00:07:38,190 --> 00:07:40,040
It's below the yellow.

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

89
00:07:46,500 --> 00:07:47,280
0,

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

91
00:07:54,470 --> 00:07:56,820
another one’s z-index to -1,

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

93
00:08:03,350 --> 00:08:06,580
of many things that affects the stacking order.

94
00:08:06,590 --> 00:08:10,360
For example, let's say that we change every body's z-index,

95
00:08:10,360 --> 00:08:16,760
so every single element, into -1, so they all have the same z-index.

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

97
00:08:24,110 --> 00:08:25,370
in the HTML file.

98
00:08:25,370 --> 00:08:27,840
So red then yellow then blue.

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

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,

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.

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

103
00:08:57,890 --> 00:09:00,790
have an explicit position set,

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

105
00:09:08,800 --> 00:09:11,560
1, change the middle one to 0,

106
00:09:11,600 --> 00:09:13,550
and the last one to -1,

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

108
00:09:19,580 --> 00:09:20,120
yellow,

109
00:09:20,120 --> 00:09:24,300
then finally it's blue right at the bottom, so basically reversing the current order.

110
00:09:24,590 --> 00:09:29,260
But you can see, because I deleted that position properties setting to absolute,

111
00:09:29,420 --> 00:09:31,340
it doesn't actually stack.

112
00:09:31,580 --> 00:09:35,810
And even if I forced it to stack it will not obey this order.

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

114
00:09:41,390 --> 00:09:42,880
actually not true.

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

116
00:09:55,640 --> 00:09:56,300
positioned

117
00:09:56,420 --> 00:10:00,740
absolute. I'm going to delete the z-index from the last div,

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,

119
00:10:10,730 --> 00:10:15,710
but the second one to have a z-index of 10.

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.

121
00:10:23,030 --> 00:10:24,950
As you'll see if I hit run,

122
00:10:25,130 --> 00:10:26,210
it doesn't.

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.

124
00:10:32,990 --> 00:10:34,630
It's still static.

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

126
00:10:41,240 --> 00:10:47,240
set it to absolute, relative or fixed, then the z-index does not apply.

127
00:10:47,390 --> 00:10:53,560
But as long as we give it a position, let's say relative,

128
00:10:53,870 --> 00:10:56,340
if I hit run you can see it's now on top,

129
00:10:56,480 --> 00:11:01,280
if I change it to absolute you'll see that it's still on top,

130
00:11:01,280 --> 00:11:06,270
if I change it to fixed it's still on top.

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.

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

133
00:11:18,680 --> 00:11:22,040
it can get pretty complicated pretty fast.

134
00:11:22,040 --> 00:11:23,920
But I'm going to help you through this.

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

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

137
00:11:37,850 --> 00:11:41,730
to be pretty helpful as we get onto the challenges.

138
00:11:41,830 --> 00:11:44,250
And let me introduce you to the first challenge.

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

140
00:11:50,690 --> 00:11:56,580
our phone image hide behind the feature section.

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.

142
00:12:01,550 --> 00:12:03,650
It's see through by default.

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

144
00:12:10,670 --> 00:12:11,840
the image.

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

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

147
00:12:23,660 --> 00:12:24,410
a go.

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.

149
00:12:31,430 --> 00:12:33,780
So pause the video and give it a go.

150
00:12:36,660 --> 00:12:36,990
All right.

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.

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

153
00:12:53,160 --> 00:12:55,360
id of features.

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

155
00:13:02,160 --> 00:13:07,120
to white in order to make sure that it's not transparent at all.

156
00:13:07,140 --> 00:13:11,450
So if it does sit on top of another element it will obscure it.

157
00:13:11,850 --> 00:13:13,540
OK so that's the first part.

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

159
00:13:20,370 --> 00:13:23,830
image go behind the features.

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

161
00:13:32,460 --> 00:13:34,090
a z-index of 0,

162
00:13:34,260 --> 00:13:38,760
so by making something -1 it will make it go behind the other things.

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,

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

165
00:13:52,680 --> 00:13:54,450
and will actually work.

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,

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.

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

169
00:14:19,440 --> 00:14:21,140
achieve what we're looking for.

170
00:14:21,300 --> 00:14:26,060
Let's hit save and see what happens when we hit run.

171
00:14:26,070 --> 00:14:28,090
So a couple of things just happened.

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

173
00:14:35,070 --> 00:14:37,880
the title image a z-index of -1,

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

175
00:14:45,510 --> 00:14:47,640
everything else. So we can't have that.

176
00:14:47,640 --> 00:14:49,300
So we have to delete that line.

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?

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

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.

180
00:15:10,200 --> 00:15:15,170
And remember that takes any HTML element out of the flow of the document,

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.

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

183
00:15:29,820 --> 00:15:34,970
allow our features to have a position and we can give it a z-index

184
00:15:34,980 --> 00:15:36,130
in that case?

185
00:15:36,240 --> 00:15:40,760
So let's check to see if this configuration would work with our flowchart.

186
00:15:41,040 --> 00:15:43,830
So are they both positioned elements?

187
00:15:43,840 --> 00:15:44,820
Yeah they are.

188
00:15:44,820 --> 00:15:45,360
They're both.

189
00:15:45,360 --> 00:15:46,290
One is absolute.

190
00:15:46,290 --> 00:15:47,970
The other one is relative.

191
00:15:48,110 --> 00:15:50,160
Do they both have a z-index?

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.

193
00:15:54,870 --> 00:15:57,210
But does one of them have a z-index?

194
00:15:57,270 --> 00:15:57,750
Yes.

195
00:15:57,750 --> 00:16:00,240
Features section has as a z-index.

196
00:16:00,240 --> 00:16:03,440
Does one have a z-index greater than 0?

197
00:16:03,540 --> 00:16:05,620
Yes, one is greater than 0.

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.

199
00:16:10,080 --> 00:16:11,750
So this should work

200
00:16:11,790 --> 00:16:13,620
if everything else is OK.

201
00:16:13,800 --> 00:16:17,650
So let's hit save and let's go and refresh.

202
00:16:17,760 --> 00:16:20,540
Ah look, it's now working.

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

204
00:16:27,780 --> 00:16:29,110
way we left it.

205
00:16:29,160 --> 00:16:30,910
So that's pretty good.

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.

207
00:16:37,390 --> 00:16:38,480
That's pretty good.

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,

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

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.

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

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

213
00:17:15,210 --> 00:17:16,020
elements?

214
00:17:16,020 --> 00:17:16,850
Yes.

215
00:17:16,980 --> 00:17:19,470
Do they both have a z-index?

216
00:17:19,470 --> 00:17:21,040
No.

217
00:17:21,060 --> 00:17:22,710
Does one of them have a z-index?

218
00:17:22,710 --> 00:17:25,900
No, actually, in this case neither of them have a z-index.

219
00:17:25,950 --> 00:17:31,130
So we go down to here. Is one below the other in the HTML flow?

220
00:17:31,260 --> 00:17:32,180
Well yes.

221
00:17:32,190 --> 00:17:35,310
Feature section is below the title image.

222
00:17:35,310 --> 00:17:39,480
So the one below in the HTML flow is going to be on top.

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.

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

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 

226
00:18:01,840 --> 00:18:05,730
z-index, but also how other things affect the stacking order.

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

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.

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

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

231
00:18:30,460 --> 00:18:34,900
space between the download buttons and the end of the section.

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

233
00:18:39,940 --> 00:18:41,060
a little bit more.

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

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

236
00:18:57,220 --> 00:18:57,990
left and right.

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.

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

239
00:19:09,640 --> 00:19:11,140
effect that we want.

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

241
00:19:18,910 --> 00:19:19,580
bottom.

242
00:19:19,720 --> 00:19:22,230
So at the moment it's, what, 43, right?

243
00:19:22,240 --> 00:19:25,830
What if we changed that to, say, I don't know, 100?

244
00:19:25,960 --> 00:19:30,130
Then you can see that this looks a lot more

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

246
00:19:35,590 --> 00:19:36,650
more space.

247
00:19:36,700 --> 00:19:38,550
So let's go ahead and do it for real

248
00:19:38,560 --> 00:19:40,620
inside our style.css.

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.

250
00:19:45,460 --> 00:19:49,170
So I still want 3 percent on the top, 15 percent left and right,

251
00:19:49,390 --> 00:19:54,460
but I'm going to add a 7 percent padding to just the bottom.

252
00:19:54,460 --> 00:19:58,690
So remember when we only have three values for things like padding and margin,

253
00:19:58,690 --> 00:20:00,300
the first one is top,

254
00:20:00,340 --> 00:20:03,670
second one is left and right, and the last one is the bottom.

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

256
00:20:10,720 --> 00:20:14,070
when we tried to change it in Chrome Developer Tools.

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

258
00:20:21,670 --> 00:20:23,820
with the end of my menu.

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

260
00:20:29,890 --> 00:20:31,390
to the right a little bit.

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

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.

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

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.

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

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

267
00:21:16,360 --> 00:21:17,370
screen.

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

269
00:21:23,710 --> 00:21:24,700
system.

270
00:21:24,700 --> 00:21:28,080
So for all of that and more, I'll see you on the next lesson.