1
00:00:00,690 --> 00:00:04,600
What aspects of our layout should
we improve using a media query?

2
00:00:05,840 --> 00:00:08,669
One thing we could do
is make our header more

3
00:00:08,669 --> 00:00:13,080
visually impressive on a large
screen where we have space to do so.

4
00:00:14,930 --> 00:00:19,289
Underneath our comment
labeled Media Queries,

5
00:00:19,289 --> 00:00:24,285
let's start with an at-rule to
apply CSS rules when the

6
00:00:24,285 --> 00:00:27,592
viewport is at least 720 pixels wide.

7
00:00:35,474 --> 00:00:39,288
Now, we'll double the vertical
padding of the header.

8
00:00:39,288 --> 00:00:43,824
The padding on the top and
bottom of the header was set to 10vh or

9
00:00:43,824 --> 00:00:47,430
10% of the height of the viewport.

10
00:00:47,430 --> 00:00:50,491
Let's double this to 20vh on larger screens,

11
00:00:50,491 --> 00:00:53,940
where we have room to make
the visual more impressive.

12
00:01:05,386 --> 00:01:09,730
We'll also increase the font
size of the header and title.

13
00:01:23,990 --> 00:01:28,455
The after pseudo-element will
help us target the arrow we

14
00:01:28,455 --> 00:01:30,839
inserted after the heading.

15
00:01:30,839 --> 00:01:37,115
We'll increase the spacing between

16
00:01:37,115 --> 00:01:43,195
the header and the arrow just a bit.

17
00:01:47,411 --> 00:01:52,227
When we preview, we can see that
changes that occur when we expand

18
00:01:52,227 --> 00:01:55,915
the viewport to make it
wider than 720 pixels.

19
00:02:04,730 --> 00:02:09,173
Finally, I'm still a bit concerned
about the width of my text

20
00:02:09,173 --> 00:02:11,640
on a very large screen.

21
00:02:11,640 --> 00:02:14,690
And I'd like to approach this
problem two different ways.

22
00:02:15,820 --> 00:02:22,397
For the divs containing "From Tents
to Resorts", and "Pack Accordingly",

23
00:02:22,397 --> 00:02:28,430
I'd like to turn these into
columns placed side-by-side.

24
00:02:28,430 --> 00:02:30,220
We'll look at that in just a moment.

25
00:02:31,900 --> 00:02:39,312
For my intro paragraph, I'm going to not
only increase the font size just a bit,

26
00:02:39,312 --> 00:02:45,526
but also add 15% of horizontal
padding to match my wildlife div.

27
00:03:10,840 --> 00:03:13,375
That's better.

28
00:03:13,375 --> 00:03:16,998
Now for
the divs containing a class called .column.

29
00:03:16,998 --> 00:03:20,278
We haven't learned the most
modern methods for

30
00:03:20,278 --> 00:03:25,040
creating responsive layouts yet,
including Flexbox and CSS Grid.

31
00:03:26,050 --> 00:03:29,264
You'll learn those in
future Treehouse courses.

32
00:03:29,264 --> 00:03:34,316
But in the meantime, I can place the two

33
00:03:34,316 --> 00:03:40,596
divs side-by-side on
a large screen by getting

34
00:03:40,596 --> 00:03:46,890
a bit creative using
display: inline-block.

35
00:03:53,863 --> 00:03:58,670
This change should, in theory,
place the two columns side-by-side.

36
00:03:59,940 --> 00:04:03,350
But when we test in the browser,
we'll find it doesn't work.

37
00:04:04,390 --> 00:04:08,278
The columns do occupy 50%
of the available width, but

38
00:04:08,278 --> 00:04:10,870
they're still stacked vertically.

39
00:04:13,105 --> 00:04:18,250
To learn about why this happens,
I've included an article in the teacher's

40
00:04:18,250 --> 00:04:24,645
notes from CSS Tricks, called "Fighting
the Space Between Inline Block Elements".

41
00:04:24,645 --> 00:04:29,614
The article notes that white spaces
in your HTML actually creates

42
00:04:29,614 --> 00:04:32,322
a bit of white space in your layout,

43
00:04:32,322 --> 00:04:37,676
even when developers would prefer
the two elements touch each other.

44
00:04:37,676 --> 00:04:42,614
I'll demonstrate by editing my
HTML to remove the return between

45
00:04:42,614 --> 00:04:44,236
the two column divs.

46
00:04:52,213 --> 00:04:55,440
Now the two columns
are against each other.

47
00:04:55,440 --> 00:04:59,453
We could also comment out that
space rather than deleting it.

48
00:05:13,065 --> 00:05:18,284
Since this is a presentation issue
however, we should really look for

49
00:05:18,284 --> 00:05:22,670
a CSS solution rather
than altering our HTML.

50
00:05:22,670 --> 00:05:24,519
So let's undo that comment.

51
00:05:27,476 --> 00:05:32,971
The CSS Tricks article also mentions
the issue can be solved by closing

52
00:05:32,971 --> 00:05:38,670
up the extra space with four pixels
of negative margin on the right side.

53
00:05:39,730 --> 00:05:40,966
Let's try that instead.

54
00:05:51,112 --> 00:05:53,420
That's a better way to solve it.

55
00:05:53,420 --> 00:05:57,640
The columns are touching each
other which isn't a great look.

56
00:05:57,640 --> 00:06:02,408
But we can solve this by first reducing

57
00:06:02,408 --> 00:06:06,583
the width from 50% to 48%.

58
00:06:13,158 --> 00:06:17,510
Now let's add space in
between the two columns.

59
00:06:17,510 --> 00:06:22,550
I'm thinking I might add 4% of margin
on the right side of the first column.

60
00:06:22,550 --> 00:06:27,191
Hopefully you'll remember from
our last video how to target

61
00:06:27,191 --> 00:06:30,110
only the first of the two column divs.

62
00:06:31,950 --> 00:06:32,910
That's right.

63
00:06:32,910 --> 00:06:37,657
We'll use the first -child pseudo selector
to select only the first element.

64
00:06:49,343 --> 00:06:52,554
Not only did we set
the right margin to 4%, but

65
00:06:52,554 --> 00:06:57,772
we cancelled out the 4rem of bottom
margin that we added in the last video,

66
00:06:57,772 --> 00:07:01,890
since we no longer need to space
out the columns vertically.

67
00:07:03,140 --> 00:07:04,620
Let's test that out in the browser.

68
00:07:07,020 --> 00:07:11,220
And looks like it's problem solving time.

69
00:07:12,510 --> 00:07:17,342
Let's use the browser's inspect
feature to check out the box model

70
00:07:17,342 --> 00:07:19,300
of each of our column divs.

71
00:07:20,420 --> 00:07:25,608
The second div still has four pixels
of negative margin, which is how

72
00:07:25,608 --> 00:07:31,440
CSS Tricks taught us to close up the space
between our inline-block elements.

73
00:07:33,500 --> 00:07:39,280
However, in the first div, we've changed
our margin to 4% of the available space.

74
00:07:40,360 --> 00:07:44,982
The problem now is we've lost that
four pixels of negative margin,

75
00:07:44,982 --> 00:07:47,830
we need to bring these two divs together.

76
00:07:48,860 --> 00:07:55,231
But, how on earth can we subtract
4 pixels of right margin from 4%?

77
00:07:55,231 --> 00:07:59,563
We can't use a fixed number
here as our column widths

78
00:07:59,563 --> 00:08:02,914
vary based on the width of the viewport.

79
00:08:06,556 --> 00:08:10,877
The answer is a really cool
CSS feature called calc(),

80
00:08:10,877 --> 00:08:16,340
which allows you to perform
math on mismatched value units.

81
00:08:16,340 --> 00:08:21,877
For example, if we wanted to
calculate the measurement of

82
00:08:21,877 --> 00:08:27,188
50% of the width of a CSS box,
plus 50 more pixels,

83
00:08:27,188 --> 00:08:31,265
we would write calc 50% + 50 pixels.

84
00:08:31,265 --> 00:08:36,234
On a large monitor,
let's say 50% of our CSS box is

85
00:08:36,234 --> 00:08:40,990
600 pixels, add 50 and we get 650 pixels.

86
00:08:40,990 --> 00:08:46,169
And then again,
on a narrow viewport such as a mobile

87
00:08:46,169 --> 00:08:53,400
screen 50% of our CSS box width
might only be 160 pixels.

88
00:08:53,400 --> 00:08:58,150
Add 50 and our total is 210 pixels.

89
00:08:58,150 --> 00:09:01,670
Either way,
CSS quickly does the math for us.

90
00:09:03,800 --> 00:09:08,720
So let's try using calc to set
the right margin of our first column.

91
00:09:16,080 --> 00:09:20,850
Notice my column div
currently measures 29 pixels.

92
00:09:20,850 --> 00:09:24,920
Yours might vary based on
the width of your viewport.

93
00:09:24,920 --> 00:09:30,445
And when I refresh, look at that,
two columns side by side.

94
00:09:30,445 --> 00:09:35,290
And, my column div is now 4
pixels narrower or 25 pixels.

95
00:09:35,290 --> 00:09:41,080
That number adjusts as we narrow or
widen our viewpoint.

96
00:09:43,090 --> 00:09:46,940
And, that completes our layout
on a variety of screens.

97
00:09:48,370 --> 00:09:51,372
I've included readings on calc
in the teacher's notes if

98
00:09:51,372 --> 00:09:53,220
you're interested to learn more.

99
00:09:54,610 --> 00:10:00,072
Again, we used display: inline-block
as a quick, short term solution

100
00:10:00,072 --> 00:10:06,740
to a simple challenge like two side-by-side columns of text about Lake Tahoe.

101
00:10:06,740 --> 00:10:11,280
But this method wasn't built for
complex responsive layouts.

102
00:10:11,280 --> 00:10:14,210
You'll learn more modern
techniques in the future.

103
00:10:16,090 --> 00:10:17,450
Nice work.

104
00:10:17,450 --> 00:10:22,148
Not only can you now control your
CSS layout, and presentation, but

105
00:10:22,148 --> 00:10:27,332
now you've learned quite a few techniques
to make your text more legible and

106
00:10:27,332 --> 00:10:30,570
keep your visuals more appealing.

107
00:10:30,570 --> 00:10:35,410
Keep practicing, keep those learning
resources handy, and keep on having fun.