0
1
00:00:00,210 --> 00:00:05,370
As I mentioned, in a previous video, the style changes cascade down to smaller screens. So all the changes
1

2
00:00:05,370 --> 00:00:08,490
we made to the tablet is reflected on the mobile views as well.
2

3
00:00:08,490 --> 00:00:13,140
Usually, it is a good start. And sometimes might even provide good results for mobiles. But often it's
3

4
00:00:13,140 --> 00:00:16,440
not enough and we have to add extra tweaking on mobiles too.
4

5
00:00:16,440 --> 00:00:20,110
I like to use same layout for mobile landscape and mobile portrait.
5

6
00:00:20,190 --> 00:00:26,040
I use mobile portrait as my guide when I plan in my head. And try to use solutions for a landscape view,
6

7
00:00:26,070 --> 00:00:29,240
that are going to work on portrait view as well.
7

8
00:00:29,250 --> 00:00:32,450
It's just a good way to save time and keep things more efficient.
8

9
00:00:32,490 --> 00:00:38,020
So based on the portrait view on mobile, I know, that nearly everything is going to be in vertical layout.
9

10
00:00:38,220 --> 00:00:41,410
Not much space for a columns and side by side layouts.
10

11
00:00:41,450 --> 00:00:44,880
There is no way we are fitting hero image and content next to each other.
11

12
00:00:44,900 --> 00:00:47,220
We'll need to find the vertical alignment solution.
12

13
00:00:47,370 --> 00:00:50,090
Luckily we have flexbox to help us with this.
13

14
00:00:50,160 --> 00:00:52,920
The default direction of flexbox is horizontal.
14

15
00:00:52,950 --> 00:00:58,440
We can change that direction anytime to the vertical. And alignment options update as well, when we change
15

16
00:00:58,440 --> 00:01:02,920
the direction. And this direction change is not going to apply to the Desktop version.
16

17
00:01:02,940 --> 00:01:05,370
There it's still set to the horizontal.
17

18
00:01:05,370 --> 00:01:07,110
That's how awesome the flexbox is.
18

19
00:01:07,110 --> 00:01:12,810
We can change the layout without altering the HTML structure. And setting these styles on a specific devices.
19

20
00:01:12,840 --> 00:01:19,110
But before we make these changes, let's give our flexbox a combo class. Because we are using this default
20

21
00:01:19,110 --> 00:01:24,930
flexbox elsewhere, for example on footer. And we don't want to make all these changes to all of the
21

22
00:01:24,930 --> 00:01:26,250
flexbox instances.
22

23
00:01:38,440 --> 00:01:41,360
Real landscape view isn't actually as tall.
23

24
00:01:41,380 --> 00:01:46,000
Think of it, when you hold your phone in the landscape mode, you're not going to get the visible screen
24

25
00:01:46,030 --> 00:01:48,620
this tall. It's going to be more like this.
25

26
00:01:48,700 --> 00:01:55,060
It means, vertical real estate is very important for us, so let's try to shrink spaces and try to fit
26

27
00:01:55,090 --> 00:01:56,110
as much as possible.
27

28
00:01:57,170 --> 00:02:01,850
For example, this padding for the section. We already shrank this on tablet view, but we should shrink
28

29
00:02:01,850 --> 00:02:02,690
it a little more.
29

30
00:02:05,980 --> 00:02:10,290
Same here for the paragraph margin. 40 pixels
30

31
00:02:10,290 --> 00:02:10,980
looks decent.
31

32
00:02:17,730 --> 00:02:22,780
The photo is a little too small *(too tall) and most of it won't be visible on the single screen and user will have
32

33
00:02:22,780 --> 00:02:23,990
to scroll through it.
33

34
00:02:24,040 --> 00:02:26,620
So let's set the maximum width on that image.
34

35
00:02:26,620 --> 00:02:31,130
I'm setting maximum width and not height. Because if you do a height value, then this will happen.
35

36
00:02:32,110 --> 00:02:38,440
Changing height doesn't preserve the aspect ratio, but width value does. So on images best to use width to
36

37
00:02:38,440 --> 00:02:39,130
resize them.
37

38
00:02:44,030 --> 00:02:44,310
Alright.
38

39
00:02:44,310 --> 00:02:46,160
Something interesting has happened here.
39

40
00:02:46,220 --> 00:02:50,560
The image doesn't shrink anymore on a smaller screen and it goes off the page.
40

41
00:02:50,570 --> 00:02:56,420
This is called overflow. When elements go outside of their parent box. You will come across with overflow
41

42
00:02:56,430 --> 00:02:58,990
objects often, especially on smaller screens.
42

43
00:02:59,090 --> 00:03:03,380
This overflowing can happen for many reasons and it affects entire page.
43

44
00:03:03,380 --> 00:03:08,600
For some reason an image refuses to shrink, so it creates an extra space on the entire page.
44

45
00:03:08,600 --> 00:03:10,680
So, how come image doesn't shrink anymore?
45

46
00:03:10,760 --> 00:03:17,690
Because when we gave an image maximum width of 500 pixels, we gave it the permission to grow all the
46

47
00:03:17,690 --> 00:03:22,820
way to 500 pixels. So it does. Ignoring the dimensions of its parent element.
47

48
00:03:22,820 --> 00:03:25,480
This sort of behavior is common with images.
48

49
00:03:25,580 --> 00:03:31,280
Some other elements, for example, a paragraph is not going to do this, but images they do. Because they
49

50
00:03:31,280 --> 00:03:36,970
have an exact width as part of the file. Or it has a width specified in the settings.
50

51
00:03:37,010 --> 00:03:43,490
So by default, image will always try to grow to its original file size. And when we set max width to 500,
51

52
00:03:43,490 --> 00:03:50,150
it stops on 500. But doesn't shrink beyond that, as long as it's allowed. To avoid this sort of behavior
52

53
00:03:50,150 --> 00:03:56,930
Webflow has an added default value for every image that you drop in. A max width of 100%.
53

54
00:03:56,930 --> 00:04:02,040
This means that the image will take up maximum of 100% of its parent element.
54

55
00:04:02,060 --> 00:04:04,880
For this reason it's best to leave this value untouched.
55

56
00:04:04,880 --> 00:04:08,840
This thing always gave me a lot of confusion and clueless stares on my screen.
56

57
00:04:08,840 --> 00:04:13,490
So now instead of styling the image itself, I prefer styling the parent of the image.
57

58
00:04:13,490 --> 00:04:16,820
This way we can avoid a lot of strange behavior down the line.
58

59
00:04:17,020 --> 00:04:22,280
All right, so let's give a maximum width of 500 pixels to the parent element, instead.
59

60
00:04:22,280 --> 00:04:24,940
Now this behaves exactly as we want it to.
60

61
00:04:24,950 --> 00:04:31,570
It doesn't grow beyond 500 and it shrinks when it needs to. Alright, we can conclude the landscape view
61

62
00:04:31,570 --> 00:04:32,020
here.
62

63
00:04:32,020 --> 00:04:37,000
We still have this horizontal overflow, but this is from other part of the page and we will take care
63

64
00:04:37,000 --> 00:04:38,570
of it, when we get to it.
64

65
00:04:38,590 --> 00:04:43,450
We do need to style the hamburger menu, but we'll do that in the end, once we're done with all the views
65

66
00:04:43,450 --> 00:04:44,560
of the hero section.
66

67
00:04:44,560 --> 00:04:46,870
Up next, we'll do the mobile portrait view.
67

68
00:04:46,870 --> 00:04:47,440
Stick around.