Now we're going to move down and optimize the next section of this page. 1
And while we do that, we're going to learn a new concept called Overflow. 2
This section looks pretty good on tablet and doesn't need much editing. 3
Only one thing I'm gonna change here is the top and bottom padding of the section. As I mentioned before, 4
we need a bit more tighter spacing on smaller devices. 5
So 60 pixels should be good. 6
On landscape, 7
we have an overflow. When you get this sort of overflow on the page, find the element that is going beyond 8
its parent margins. 9
That's going to be the cause of the issue. Here it's obvious that the paragraph is causing this, because 10
it's outside of the boundaries of the container and even section. 11
The reason it's not shrinking is because it has a fixed width. We made a mistake on the desktop and 12
instead of setting responsive value like maximum width, we gave it a fixed width. 13
Now, because this is not an optimal setting neither on the desktop. Let's just style this on the desktop 14
version and let the styles then cascade all the way down. 15
Before we move on. 16
Let's actually understand what is Overflow. 17
Is it a bug or is it a feature? 18
Actually, 19
Overflow is a very handy feature. 20
It has its own dedicated setting in the styles. 21
Let me demonstrate how this works. 22
We have a div block here. 23
I've added to this div exact width and height. 24
It's 900 pixels by 300 pixels. 25
If we put more content into this div block, the content will overflow. 26
Why? 27
Because it has a defined height - 300. 28
So, it's not going to grow beyond that size. 29
If we remove that height value, you'll see the box will grow with a content. But sometimes that's not 30
what we want. 31
And we want to keep the box at exact dimensions. 32
If you check the overflow settings of this div block, you'll see that it's set to visible. 33
This means that overflowing content will still be shown. 34
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
if we tried to scroll inside it. 36
But for such cases, we have another option to make the content inside scroll. 37
But this option isn't very good, because it always shows the horizontal and vertical scroll bar, even 38
if there is not enough content to scroll. For this, we have a better option. 39
The last - Auto. This displays scroll bar, only if there is something to scroll. Horizontal bar is gone. 40
And if there is content overflowing vertically, then it will show the scroll bar. 41
This is always a better option if you're creating a scrollable content. Just to note, on your computer 42
you may or may not see this difference. 43
This depends on the settings you have chosen inside your operating system, inside Mac or Windows. 44
Another thing to note, the overflow settings are set on the parent element not on the children. 45
So in this case, we set it on this white div block. 46
If we set it on the paragraph, that's not gonna do anything. 47
Besides scrolling content, another common use for overflow setting is when we want to clip content. 48
And that's usually done with images, we never want to clip text probably. 49
For example, if we have a section with an image and we want to clip that excess of that image, we can 50
set the Overflow Hidden on the parent element. And that's going to clip the image. 51
All right. Let's finish up our mobile views. 52
We still have this gap on the page, but that's caused by some other element on a different section. 53
So we will take care of it once we get there. 54
Now let's do something about this very narrow look. On hero section we have changed the padding to 55
30 pixels, but we never did it for this section. 56
So let's do that. 57
And let's decrease the vertical padding as well, to be more economical on spacing. 58
I'm actually going to decrease this on landscape as well because vertical space is even more important 59
on the landscape. 60
And reset the value on portrait. 61
If you have changed them at any point. It's better to inherit values than to repeat the styles. Because 62
it just adds extra code, which we don't need. 63
And finally, let's do something about the headlines. 64
Too big for the mobile. 65
Now remember, the heading isn't a class. We styled the tag. 66
So this is how we're going to style this. 67
Select all H1 headings from the selector dropdown and then change the styles. 68
That will change all H1 headings for mobile portraits. But won't affect other devices. 69
All right. 70
35 pixels 71
works quite well. 72
Finally, what to do with that image. 73
It's too small to be anything. 74
There is one thing we can do. 75
We can have image go off the side and clip the overflow using what we just learned. 76
First, we have to increase the size of the image. When it comes to changing image sizes, in responsive 77
views, 78
never use these settings. 79
This changes the HTML settings of the image. And that's going to change the size everywhere on all 80
devices. 81
You could also drag the image to resize. But don't use that either, it changes that same width that's 82
inside the settings. 83
What we want to change instead, is the CSS style of the image. Because CSS style gives us flexibility 84
to have different sizes on different devices. To do that, 85
select the image. You see this Max Width of 100% ? 86
That tells the image to do not grow bigger than its parent container. 87
So that's why it's shrinking. 88
Since this is a rare scenario, where we want the image to actually grow beyond the container and even 89
beyond the page, we're going to edit that exact setting. And set it to something like 170%. 90
And now it goes off the page. And since it's bigger, now we can see a bit more detail 91
of the image. But we have image overflowing like this. 92
So what do we do? 93
We need to set Overflow Hidden on the parent element to clip the image. But we can't set that on the direct 94
parent, which is the container. Because container doesn't go all the way to the edge. 95
The section does. So we need to put that Overflow style on the section. But let's add the combo class to it, 96
so it doesn't affect all the sections. 97
And there we go. Now the image is clipping right on the edge of the section. So we've learned important 98
concept of Overflow and how to use it for our benefit. Overflow Visible is a default setting, so it will 99
show any content that goes outside the borders of the parent element. Overflow Hidden is going to clip 100
the content just like we did here. And Overflow Scroll and Auto will let the content scroll inside the 101
container. But the scroll option will display persistent scrollbar even when there is nothing to scroll.