WEBVTT

1
00:00:00.003 --> 00:00:03.003
(upbeat music)

2
00:00:03.003 --> 00:00:04.004
- [Instructor] Let's start this exercise

3
00:00:04.004 --> 00:00:06.007
by looking at the finished project to figure out

4
00:00:06.007 --> 00:00:09.005
where to put the content wrapper divs.

5
00:00:09.005 --> 00:00:12.002
On the homepage, the content is centered,

6
00:00:12.002 --> 00:00:16.002
but we want the footer to span all the way across.

7
00:00:16.002 --> 00:00:18.001
So we don't need to include the footer

8
00:00:18.001 --> 00:00:21.003
in the content wrapper.

9
00:00:21.003 --> 00:00:23.004
The same is true on the resume page

10
00:00:23.004 --> 00:00:25.008
in regards to the footer.

11
00:00:25.008 --> 00:00:29.008
Also, the header image spans all the way across as well,

12
00:00:29.008 --> 00:00:32.006
but the content, which is the name and title,

13
00:00:32.006 --> 00:00:35.000
doesn't span all the way across.

14
00:00:35.000 --> 00:00:38.003
So for the resume page, we'll need to create a content wrap

15
00:00:38.003 --> 00:00:40.008
just for the header content that is separate

16
00:00:40.008 --> 00:00:45.003
from the rest of the resume content.

17
00:00:45.003 --> 00:00:47.004
Back in the editor, let's look at the markup

18
00:00:47.004 --> 00:00:51.003
in the index.html file.

19
00:00:51.003 --> 00:00:54.002
If we scroll up to the top of the page,

20
00:00:54.002 --> 00:00:56.002
we can see that we've already added

21
00:00:56.002 --> 00:01:00.002
a content wrapper container in a previous exercise,

22
00:01:00.002 --> 00:01:03.001
but we use this with the descendant selector home

23
00:01:03.001 --> 00:01:05.006
to apply the background color to the text

24
00:01:05.006 --> 00:01:07.003
just on the homepage.

25
00:01:07.003 --> 00:01:10.005
But we can reuse the content wrapper class

26
00:01:10.005 --> 00:01:13.008
to center align the content on both pages.

27
00:01:13.008 --> 00:01:15.008
In the resume.html file,

28
00:01:15.008 --> 00:01:18.009
we'll need to add this container div.

29
00:01:18.009 --> 00:01:20.006
Let's start from the top.

30
00:01:20.006 --> 00:01:24.002
For the header, we just want to wrap the text content,

31
00:01:24.002 --> 00:01:28.008
so let's add the divs around just the H1 and H2.

32
00:01:28.008 --> 00:01:31.003
I'll take the closing div and move it

33
00:01:31.003 --> 00:01:36.000
just after the closing H2 and reformat it.

34
00:01:36.000 --> 00:01:40.006
Then I'll add the class of content wrapper.

35
00:01:40.006 --> 00:01:42.003
For the rest of the content,

36
00:01:42.003 --> 00:01:47.004
we can add this class to the main element.

37
00:01:47.004 --> 00:01:49.004
If I collapse the code in the main tag,

38
00:01:49.004 --> 00:01:53.001
we can see more easily that it wraps around all the content

39
00:01:53.001 --> 00:01:55.006
after the header and before the footer,

40
00:01:55.006 --> 00:01:59.004
which is what we need to center align this content.

41
00:01:59.004 --> 00:02:03.009
So let's add the same content wrapper class here,

42
00:02:03.009 --> 00:02:09.001
and then we'll switch over to our CSS file.

43
00:02:09.001 --> 00:02:12.004
Now, let's add this selector under the global section

44
00:02:12.004 --> 00:02:14.000
since this style will be applied

45
00:02:14.000 --> 00:02:17.005
to both the homepage and the resume page.

46
00:02:17.005 --> 00:02:21.006
I'm going to add it right after the link styles.

47
00:02:21.006 --> 00:02:24.001
Let's add the margin value.

48
00:02:24.001 --> 00:02:26.006
The top and bottom value can be anything you want.

49
00:02:26.006 --> 00:02:27.007
I'm going to set it to zero

50
00:02:27.007 --> 00:02:30.000
because I don't want any extra space,

51
00:02:30.000 --> 00:02:32.003
but the second value needs to be set to auto

52
00:02:32.003 --> 00:02:35.005
to auto align the left and right sides.

53
00:02:35.005 --> 00:02:37.005
Then we'll need to add a width.

54
00:02:37.005 --> 00:02:39.003
The size that you set for the content

55
00:02:39.003 --> 00:02:41.000
often depends on your page layout

56
00:02:41.000 --> 00:02:42.007
and the size of your fonts.

57
00:02:42.007 --> 00:02:48.007
Let's try a width of 900 pixels and see how that looks.

58
00:02:48.007 --> 00:02:50.001
We'll go over to the browser

59
00:02:50.001 --> 00:02:56.004
and refresh the page to see the updates.

60
00:02:56.004 --> 00:02:59.008
And here's how it looks on the resume page.

61
00:02:59.008 --> 00:03:02.008
For desktop size screens, this looks fine,

62
00:03:02.008 --> 00:03:06.006
but for smaller screens or if the browser has been resized,

63
00:03:06.006 --> 00:03:09.001
the content will scroll horizontally

64
00:03:09.001 --> 00:03:10.008
if the viewport is smaller

65
00:03:10.008 --> 00:03:13.008
than the fixed width of 900 pixels.

66
00:03:13.008 --> 00:03:15.001
So let's go back to the editor

67
00:03:15.001 --> 00:03:22.004
and change this to max width instead.

68
00:03:22.004 --> 00:03:24.000
We can still use a fixed value,

69
00:03:24.000 --> 00:03:27.004
but now it's set to a maximum value.

70
00:03:27.004 --> 00:03:30.005
Let's go back to the browser and see this update.

71
00:03:30.005 --> 00:03:32.006
Using max width will set the content wrapper

72
00:03:32.006 --> 00:03:36.001
to a maximum of 900 pixels.

73
00:03:36.001 --> 00:03:38.005
This will keep it from getting too wide,

74
00:03:38.005 --> 00:03:41.003
but if the browser viewport is less than 900 pixels,

75
00:03:41.003 --> 00:03:45.007
then the width becomes equal to 100% of its container.

76
00:03:45.007 --> 00:03:46.008
But we don't want the content

77
00:03:46.008 --> 00:03:50.000
to go right up to the edge of the container as well.

78
00:03:50.000 --> 00:03:52.005
But instead of changing the width for smaller viewports,

79
00:03:52.005 --> 00:03:53.006
let's just add some padding

80
00:03:53.006 --> 00:03:56.004
to add space inside the container.

81
00:03:56.004 --> 00:03:59.001
We'll go back to our content wrapper CSS

82
00:03:59.001 --> 00:04:02.004
and add a padding value of 30 pixels.

83
00:04:02.004 --> 00:04:04.005
I like to keep my margin and padding styles together,

84
00:04:04.005 --> 00:04:08.001
so I'll just add it underneath margin.

85
00:04:08.001 --> 00:04:12.003
Now this will add 30 pixels of padding to all four sides.

86
00:04:12.003 --> 00:04:15.008
Let's save the file again and refresh the browser.

87
00:04:15.008 --> 00:04:18.001
So now we have padding around the content wrapper

88
00:04:18.001 --> 00:04:19.005
to keep the content from going

89
00:04:19.005 --> 00:04:22.000
right to the edge of the container,

90
00:04:22.000 --> 00:04:24.004
and by using max width instead of width,

91
00:04:24.004 --> 00:04:26.004
we can make the sizing flexible

92
00:04:26.004 --> 00:04:28.008
while still maintaining some fixed control

93
00:04:28.008 --> 00:04:31.002
over the design and layout.

94
00:04:31.002 --> 00:04:33.006
This will help when we start using media queries

95
00:04:33.006 --> 00:04:35.004
to make responsive design changes

96
00:04:35.004 --> 00:04:36.008
for different screen sizes,

97
00:04:36.008 --> 00:04:39.002
which will be covered in chapter seven.

98
00:04:39.002 --> 00:04:42.004
But I recommend doing all these lessons in order.

99
00:04:42.004 --> 00:04:43.008
We'll get there soon enough.