0
1
00:00:00,240 --> 00:00:03,880
Now we're going to move down and optimize the next section of this page.
1

2
00:00:03,930 --> 00:00:08,070
And while we do that, we're going to learn a new concept called Overflow.
2

3
00:00:08,100 --> 00:00:11,670
This section looks pretty good on tablet and doesn't need much editing.
3

4
00:00:11,670 --> 00:00:17,210
Only one thing I'm gonna change here is the top and bottom padding of the section. As I mentioned before,
4

5
00:00:17,220 --> 00:00:20,000
we need a bit more tighter spacing on smaller devices.
5

6
00:00:20,010 --> 00:00:22,230
So 60 pixels should be good.
6

7
00:00:29,150 --> 00:00:29,990
On landscape,
7

8
00:00:29,990 --> 00:00:36,410
we have an overflow. When you get this sort of overflow on the page, find the element that is going beyond
8

9
00:00:36,410 --> 00:00:37,910
its parent margins.
9

10
00:00:38,150 --> 00:00:44,030
That's going to be the cause of the issue. Here it's obvious that the paragraph is causing this, because
10

11
00:00:44,030 --> 00:00:47,780
it's outside of the boundaries of the container and even section.
11

12
00:00:47,780 --> 00:00:53,030
The reason it's not shrinking is because it has a fixed width. We made a mistake on the desktop and
12

13
00:00:53,030 --> 00:00:57,970
instead of setting responsive value like maximum width, we gave it a fixed width.
13

14
00:00:58,100 --> 00:01:02,930
Now, because this is not an optimal setting neither on the desktop. Let's just style this on the desktop
14

15
00:01:02,930 --> 00:01:05,720
version and let the styles then cascade all the way down.
15

16
00:01:10,120 --> 00:01:10,920
Before we move on.
16

17
00:01:10,930 --> 00:01:13,540
Let's actually understand what is Overflow.
17

18
00:01:13,540 --> 00:01:15,490
Is it a bug or is it a feature?
18

19
00:01:18,310 --> 00:01:18,960
Actually,
19

20
00:01:18,970 --> 00:01:20,790
Overflow is a very handy feature.
20

21
00:01:20,800 --> 00:01:24,080
It has its own dedicated setting in the styles.
21

22
00:01:24,100 --> 00:01:25,510
Let me demonstrate how this works.
22

23
00:01:26,080 --> 00:01:27,410
We have a div block here.
23

24
00:01:27,430 --> 00:01:30,420
I've added to this div exact width and height.
24

25
00:01:30,430 --> 00:01:32,970
It's 900 pixels by 300 pixels.
25

26
00:01:32,980 --> 00:01:37,650
If we put more content into this div block, the content will overflow.
26

27
00:01:37,720 --> 00:01:38,200
Why?
27

28
00:01:38,200 --> 00:01:40,950
Because it has a defined height - 300.
28

29
00:01:41,260 --> 00:01:44,200
So, it's not going to grow beyond that size.
29

30
00:01:44,260 --> 00:01:50,800
If we remove that height value, you'll see the box will grow with a content. But sometimes that's not
30

31
00:01:50,800 --> 00:01:51,750
what we want.
31

32
00:01:51,850 --> 00:01:55,300
And we want to keep the box at exact dimensions.
32

33
00:01:55,300 --> 00:01:59,580
If you check the overflow settings of this div block, you'll see that it's set to visible.
33

34
00:01:59,590 --> 00:02:02,920
This means that overflowing content will still be shown.
34

35
00:02:02,920 --> 00:02:08,530
If we set it to hidden, the content will be clipped. And it's not going to show no matter what we do, even
35

36
00:02:08,530 --> 00:02:10,030
if we tried to scroll inside it.
36

37
00:02:10,450 --> 00:02:15,600
But for such cases, we have another option to make the content inside scroll.
37

38
00:02:15,760 --> 00:02:20,950
But this option isn't very good, because it always shows the horizontal and vertical scroll bar, even
38

39
00:02:20,950 --> 00:02:25,830
if there is not enough content to scroll. For this, we have a better option.
39

40
00:02:25,840 --> 00:02:32,280
The last - Auto. This displays scroll bar, only if there is something to scroll. Horizontal bar is gone.
40

41
00:02:32,290 --> 00:02:37,180
And if there is content overflowing vertically, then it will show the scroll bar.
41

42
00:02:37,180 --> 00:02:42,100
This is always a better option if you're creating a scrollable content. Just to note, on your computer
42

43
00:02:42,100 --> 00:02:44,270
you may or may not see this difference.
43

44
00:02:44,290 --> 00:02:49,830
This depends on the settings you have chosen inside your operating system, inside Mac or Windows.
44

45
00:02:49,830 --> 00:02:54,960
Another thing to note, the overflow settings are set on the parent element not on the children.
45

46
00:02:54,970 --> 00:02:58,030
So in this case, we set it on this white div block.
46

47
00:02:58,030 --> 00:03:00,550
If we set it on the paragraph, that's not gonna do anything.
47

48
00:03:07,570 --> 00:03:12,790
Besides scrolling content, another common use for overflow setting is when we want to clip content.
48

49
00:03:13,190 --> 00:03:17,650
And that's usually done with images, we never want to clip text probably.
49

50
00:03:17,650 --> 00:03:24,430
For example, if we have a section with an image and we want to clip that excess of that image, we can
50

51
00:03:24,430 --> 00:03:32,460
set the Overflow Hidden on the parent element. And that's going to clip the image.
51

52
00:03:32,480 --> 00:03:35,030
All right. Let's finish up our mobile views.
52

53
00:03:35,060 --> 00:03:40,550
We still have this gap on the page, but that's caused by some other element on a different section.
53

54
00:03:40,550 --> 00:03:42,770
So we will take care of it once we get there.
54

55
00:03:42,770 --> 00:03:47,740
Now let's do something about this very narrow look. On hero section we have changed the padding to
55

56
00:03:47,750 --> 00:03:50,660
30 pixels, but we never did it for this section.
56

57
00:03:50,660 --> 00:03:51,530
So let's do that.
57

58
00:03:57,970 --> 00:04:05,910
And let's decrease the vertical padding as well, to be more economical on spacing.
58

59
00:04:06,060 --> 00:04:11,190
I'm actually going to decrease this on landscape as well because vertical space is even more important
59

60
00:04:11,190 --> 00:04:11,960
on the landscape.
60

61
00:04:16,680 --> 00:04:18,260
And reset the value on portrait.
61

62
00:04:18,270 --> 00:04:24,180
If you have changed them at any point. It's better to inherit values than to repeat the styles. Because
62

63
00:04:24,180 --> 00:04:27,600
it just adds extra code, which we don't need.
63

64
00:04:27,630 --> 00:04:30,050
And finally, let's do something about the headlines.
64

65
00:04:30,060 --> 00:04:31,680
Too big for the mobile.
65

66
00:04:31,690 --> 00:04:34,750
Now remember, the heading isn't a class. We styled the tag.
66

67
00:04:34,830 --> 00:04:37,110
So this is how we're going to style this.
67

68
00:04:37,240 --> 00:04:41,700
Select all H1 headings from the selector dropdown and then change the styles.
68

69
00:04:41,880 --> 00:04:46,920
That will change all H1 headings for mobile portraits. But won't affect other devices.
69

70
00:04:50,890 --> 00:04:51,230
All right.
70

71
00:04:51,240 --> 00:04:52,160
35 pixels
71

72
00:04:52,160 --> 00:04:53,150
works quite well.
72

73
00:04:55,850 --> 00:04:57,470
Finally, what to do with that image.
73

74
00:04:57,470 --> 00:04:59,670
It's too small to be anything.
74

75
00:04:59,840 --> 00:05:00,890
There is one thing we can do.
75

76
00:05:00,900 --> 00:05:05,800
We can have image go off the side and clip the overflow using what we just learned.
76

77
00:05:05,820 --> 00:05:11,170
First, we have to increase the size of the image. When it comes to changing image sizes, in responsive
77

78
00:05:11,170 --> 00:05:11,480
views,
78

79
00:05:11,480 --> 00:05:13,140
never use these settings.
79

80
00:05:13,220 --> 00:05:18,710
This changes the HTML settings of the image. And that's going to change the size everywhere on all
80

81
00:05:18,710 --> 00:05:20,150
devices.
81

82
00:05:20,150 --> 00:05:25,490
You could also drag the image to resize. But don't use that either, it changes that same width that's
82

83
00:05:25,490 --> 00:05:26,860
inside the settings.
83

84
00:05:26,900 --> 00:05:32,780
What we want to change instead, is the CSS style of the image. Because CSS style gives us flexibility
84

85
00:05:32,780 --> 00:05:36,200
to have different sizes on different devices. To do that,
85

86
00:05:36,200 --> 00:05:40,450
select the image. You see this Max Width of 100% ?
86

87
00:05:40,640 --> 00:05:44,660
That tells the image to do not grow bigger than its parent container.
87

88
00:05:44,660 --> 00:05:46,220
So that's why it's shrinking.
88

89
00:05:46,220 --> 00:05:51,500
Since this is a rare scenario, where we want the image to actually grow beyond the container and even
89

90
00:05:51,500 --> 00:05:56,990
beyond the page, we're going to edit that exact setting. And set it to something like 170%.
90

91
00:05:56,990 --> 00:06:02,930
And now it goes off the page. And since it's bigger, now we can see a bit more detail
91

92
00:06:02,930 --> 00:06:06,320
of the image. But we have image overflowing like this.
92

93
00:06:06,320 --> 00:06:07,490
So what do we do?
93

94
00:06:07,550 --> 00:06:13,910
We need to set Overflow Hidden on the parent element to clip the image. But we can't set that on the direct
94

95
00:06:13,940 --> 00:06:18,650
parent, which is the container. Because container doesn't go all the way to the edge.
95

96
00:06:18,710 --> 00:06:25,100
The section does. So we need to put that Overflow style on the section. But let's add the combo class to it, 
96

97
00:06:25,100 --> 00:06:26,840
so it doesn't affect all the sections.
97

98
00:06:33,380 --> 00:06:38,880
And there we go. Now the image is clipping right on the edge of the section. So we've learned important
98

99
00:06:38,880 --> 00:06:44,700
concept of Overflow and how to use it for our benefit. Overflow Visible is a default setting, so it will
99

100
00:06:44,700 --> 00:06:50,310
show any content that goes outside the borders of the parent element. Overflow Hidden is going to clip
100

101
00:06:50,310 --> 00:06:55,890
the content just like we did here. And Overflow Scroll and Auto will let the content scroll inside the
101

102
00:06:55,890 --> 00:07:01,460
container. But the scroll option will display persistent scrollbar even when there is nothing to scroll.