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.